Empty Table Markup

<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>

Comments

  1. User Avatar
    Renato Alves
    Permalink to comment#

    Thank you Chris! Helped me alot! :D

  2. User Avatar
    Jannik
    Permalink to comment#

    I always thought, Layouts with table are bad

  3. User Avatar
    fazle
    Permalink to comment#

    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?

  4. User Avatar
    Shez
    Permalink to comment#

    @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

  5. User Avatar
    tomasz86
    Permalink to comment#

    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.

    • User Avatar
      Marijke
      Permalink to comment#

      Now that you’re at it, don’t forget the id/headers attributes!
      If I could, I’d grant you kudos for placing tfoot above tbody.

  6. User Avatar
    Orbit Sites
    Permalink to comment#

    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

  7. User Avatar
    Wahhab Baldwin
    Permalink to comment#

    If HTML5 support is a given, there are sometimes advantages to using the display:table approach:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>HTML5 Tables</title>
    <style>
    div { 
            display: table; 
        }
    div div { 
            display: table-row; 
        }
    div div div { 
        display: table-cell;
        background: #EEE;
        border: 1px solid #777;
        padding: 1em;
    }
    </style>
    </head>
    
    <body>
    <div>
        <div>
            <div>Row one col one</div>
            <div>Row one col two</div>
        </div>
        <div>
            <div>Row two col one</div>
            <div>Row two col two</div>
        </div>
    </div>
    </body>
    </html>
    
    • User Avatar
      Fred

      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”.

    • User Avatar
      zsitro
      Permalink to comment#

      when?

    • User Avatar
      Carlos Cordero

      @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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag