I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>
Related
I want to give to each of my table <th>'s an identifier, so It won't matter the other when I am using the <td> (while I know the identifier), I found this (HTML headers Attribute), which seems like what I need:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone#example.com</td>
</tr>
</table>
But I change the order of the <td>'s like this, first the email and then the name:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="email">someone#example.com</td>
<td headers="name">John Doe</td>
</tr>
</table>
And as you can see the result that I get is the same.
The header attribute has no effect on presentation; it will not swap table cells around. The header attribute simply denotes which <th> cells the <td> cells relate to for the purposes of enhancing screen readers:
This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the <th> element alone or the <th> element with the scope attribute.
Note that each <td> cell can relate to more than one header cell, if the table contains more than one header row. For example:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
In order to swap table cells around, you'd be much better off using either flexbox (making use of flex-direction) or a JavaScript solution.
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center
It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.
try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;
I am trying to create a table in HTML that does both row and column spanning. I've nailed most of it, but the upper right has two blank rows that I would like to span. Here's what I have so far (it's a confusion matrix--that's an understatement):
<table>
<tr>
<th colspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<th colspan="2"></th>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
Is that possible? Thanks for any assistance.
You mean the upper left right?
<table>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
http://jsfiddle.net/j0Ln2uwm/
I am following the UN's accessibility guidelines to write accessible table.
I have this table. I made what -I think- should be a <th> bold.
This is the HTML:
<table width="100%">
<thead>
<tr>
<th>Year</th>
<th>1991</th>
<th>1995</th>
<th>2000</th>
<th>2002</th>
<th>2007</th>
</tr>
</htead>
<tbody>
<tr>
<th>Indicator 1</th>
<td>3.0</td>
<td>11.0</td>
<td>7.8</td>
<td>4.0</td>
<td>4.7</td>
</tr>
<tr>
<th>Indicator 2</th>
<td>9.0</td>
<td>23.4</td>
<td>19.5</td>
<td>9.4</td>
<td>9.1</td>
</tr>
<tr>
<th>Indicator 3</th>
<td>18.7</td>
<td>32.0</td>
<td>30.0</td>
<td>20.1</td>
<td>21.8</td>
</tr>
</tbody>
</table>
But I am not sure it is accurate. I think this makes more sense:
<table>
<tbody>
<tr>
<th id="year">Year</th>
<td headers="year" id="year-1991">1991</td>
<td headers="year" id="year-1995">1995</td>
<td headers="year" id="year-2000">2000</td>
<td headers="year" id="year-2002">2002</td>
<td headers="year" id="year-2007">2007</td>
</tr>
<tr>
<th id="indicator-1">Indicator 1</th>
<td headers="indicator-1 year-1991">3.0</td>
<td headers="indicator-1 year-1995">11.0</td>
<td headers="indicator-1 year-2000">7.8</td>
<td headers="indicator-1 year-2002">4.0</td>
<td headers="indicator-1 year-2007">4.7</td>
</tr>
<tr>
<th id="indicator-2">Indicator 2</th>
<td headers="indicator-2 year-1991">9.0</td>
<td headers="indicator-2 year-1995">23.4</td>
<td headers="indicator-2 year-2000">19.5</td>
<td headers="indicator-2 year-2002">9.4</td>
<td headers="indicator-2 year-2007">9.1</td>
</tr>
<tr>
<th id="indicator-3">Indicator 3</th>
<td headers="indicator-3 year-1991">18.7</td>
<td headers="indicator-3 year-1995">32.0</td>
<td headers="indicator-3 year-2000">30.0</td>
<td headers="indicator-3 year-2002">20.1</td>
<td headers="indicator-3 year-2007">21.8</td>
</tr>
</tbody>
</table>
What do you think? Does anyone have experience with tables and accessibility? Please provide references if possible. Thanks.
Note: I am aware of the summary attribute but I removed it here for simplicity.
For a table with a simple structure like this, your markup (the first, simple version) is sufficient for accessibility. A table with similar structure appears in HTML and XHTML Techniques for WCAG 2.0, item Using table markup to present tabular information, with no extra markup, just th for header cells.
Special techniques may be need for structurally more complicated tables.
However, a data table should normally have a caption element for accessibility and usability. It helps the user get key information about the table as a whole. Instead of a caption, a heading or just text before the table could be used for the purpose, but they do not associate with the table (at the markup level) the same way.
I found that using the scope attribute makes more sense:
<table width="100%">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">1991</th>
<th scope="col">1995</th>
<th scope="col">2000</th>
<th scope="col">2002</th>
<th scope="col">2007</th>
</tr>
</htead>
<tbody>
<tr>
<th scope="row">Indicator 1</th>
<td>3.0</td>
<td>11.0</td>
<td>7.8</td>
<td>4.0</td>
<td>4.7</td>
</tr>
<tr>
<th scope="row">Indicator 2</th>
<td>9.0</td>
<td>23.4</td>
<td>19.5</td>
<td>9.4</td>
<td>9.1</td>
</tr>
<tr>
<th scope="row">Indicator 3</th>
<td>18.7</td>
<td>32.0</td>
<td>30.0</td>
<td>20.1</td>
<td>21.8</td>
</tr>
</tbody>
Reference: Use the th element to specify row and column headers in data tables | 456 Berea St