<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>Empty Table Markup
Chris Coyier on
Thank you Chris! Helped me alot! :D
I always thought, Layouts with table are bad …
Was it a snippet that important to show? Why would a person be here in first place if he doesn’t know what a HTML table is?
@Jannik: yes layout with tables are bad but this page does not mention that we should use tables for layout merely points out the correct usage should we need to display DATA i.e. real tables
Caption, colgroup and tfoot are missing :P
<table>
<caption></caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
@fazle Many people don’t know how to properly organise a data table using caption, thead, tbody, etc.
Now that you’re at it, don’t forget the id/headers attributes!
If I could, I’d grant you kudos for placing
tfootabovetbody.Shouldn’t the
<tfoot>element be placed below the<tbody>??https://www.w3.org/TR/html/tabular-data.html#the-table-element
Content model:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.
I ALWAYS use this, just wanted to give my thanks.
@tomasz86 @Marijke
It’s a fair comment :) but the basic table structure provided is most of the time
If HTML5 support is a given, there are sometimes advantages to using the display:table approach:
Great example, thanks. I’ve been wondering how to do this.
I’ve played with this for a few minutes without success, so I have a question please: In the layout above, where does the ”DIV” go to allow the top row to span two or more columns? And what code is it please?
In “old” HTML using tables it was “COLSPAN”.
when?
@Wahhab Baldwin, this is a good example, however it could cause some issues for a11y. Some screen readers might get lost while going through the content on those divs or the data might not make sense for the screen reader user. Writing HTML semantically is important and helps all your users.
Great! Well Done! Awesome! Wonderful! Fabulous! Fantastic!