Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 days ago.
Improve this question
I have a table in html and I want to add different background images to each <th> of the table, but the background image is not coming up
I tried by adding in following way
<tr>
<th>Test table header</th>
<th style="background: url("external url");" >Column 1 header <br/>How to</th>
<th style="background: url("external url");" >Column 2 header <br/>How to</th>
</tr>
But the image is not coming up.
Tried below alternative as well
<th style="background-image: url("external url");" >Column 1 header <br/>How to</th>
It should work using ' instead of "
<th style='background: url("external url");' >Column 2 header <br/>How to</th>
Column 2 header How to
Try simple quote instead of double quotes for the external url, because you're style param already use double quotes :
<tr>
<th> Test table header </th>
<th style="background: url('external url');" >Column 1 header <br/>How to</th>
<th style="background: url('external url');" >Column 2 header <br/>How to</th>
</tr>
Should be working with background-image: url(external url); without the quotes:
<table>
<tr>
<th style="background-image: url(https://i.imgur.com/Q9GFjaY.jpeg);">Column 1 header <br/>How to</th>
<th style="background-image: url(https://i.imgur.com/xohARva.png);">Column 2 header <br/>How to</th>
</tr>
</table>
If you still don't see it maybe your cells should be bigger
Related
I have a table that contains location information. I wanted to hear how a screen reader would interpret my markup. Sure enough it read 'CA' as the letters C and A. It also did the same thing for the table cell with an age, it read '23' as 2 3. Is there a way to mark these items and others like that in a way that screen readers will read them as 'California' and 'twenty three' without actually spelling them out?
EDIT: Added the title attr alongside with the regular text. The screenreader reads: "Age, group, twenty three, 2 3"
I also tried adding an aria-hidden="true" to a span nested inside of the <td> but it completely skipped the td and the span and moved onto the next element.
Markup:
<table>
<tbody>
<tr>
<th scope="row">First Name</th>
<td>John</td>
</tr>
<tr>
<th scope="row">Age</th>
<td title="Twenty Three">23</td>
</tr>
<tr>
<th scope="row">State</th>
<td tithe="California">CA</td>
</tr>
</tbody>
</table>
ARIA-hidden:
<table>
<tbody>
<tr>
<th scope="row">Age</th>
<td title="Twenty Three"><span aria-hidden="true">23</span></td>
</tr>
</tbody>
</table>
yes, you can use a title attribute to make it easyer for people with screen readers
<table>
<tbody>
<tr>
<th scope="row">First Name</th>
<td>John</td>
</tr>
<tr>
<th scope="row">Age</th>
<td title="twentythree">23</td>
</tr>
<tr>
<th scope="row">State</th>
<td title="California">CA</td>
</tr>
</tbody>
</table>
A screen reader will read the title text rather then the content, so you can add screen reader friendly text for any table cell
I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers
i have a html table which looks like this:
<table>
<thead>
<tr>
<th >title1</th>
<th >title2</th>
<th >title3</th>
<th >title4</th>
<th >title5</th>
<th >title6</th>
<th >title7</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
...
<td>data7</td>
</tr>
</tbody>
the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?
I'm not sure what 'splitting' is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.
Live Example
I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to know how to convert a normal html table to be looked like flexigrid. Is it possible to avoid scrolling of headers in the table like flexigrid?
It's possible to fix the head with CSS. It will always stay visible on top.
<table>
<thead style="position:fixed; top:0px; z-index:42; background:#fff;">
<tr>
<th>head cell a</th>
<th>head cell b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1a</td>
<td>1b</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
</tr>
<!-- ... -->
</tbody>
</table>