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>
    

Leave a Comment

Current day month ye@r *

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