Grow your CSS skills. Land your dream job.

Last updated on:

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. Thank you Chris! Helped me alot! :D

  2. Jannik
    Permalink to comment#

    I always thought, Layouts with table are bad

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

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

    • zsitro
      Permalink to comment#

      when?

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".