mozilla

Revision 105950 of Tables

  • Revision slug: Useful_CSS_tips/Tables
  • Revision title: Tables
  • Revision id: 105950
  • Created:
  • Creator: gregtyler
  • Is current revision? No
  • Comment Examples filled out, wording changed a wee bit; 236 words added, 105 words removed

Revision Content

 

Centering

If you want to center a table, it is not correct to use

text-align: center;

in its parent. The correct way is to apply

margin-left: auto;
margin-right: auto;

style to the table itself.

Table with margin-left: auto; margin-right: auto;
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

Borders

By default, tables are rendered with spacing between cells and borders around each of 1 pixel.

Standard table
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

If you want to transform the table in a grid, you set its cellspacing attribute to 0.

You can remove the spacing by setting the table's cellspacing attribute to 0.

<table cellspacing="0">
<tr>...</tr>
</table>
Table with no cellspacing
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

The result is not as expected, and the reason is that the default border model is set to separate. With this model each cell has its own border so, when the gap between cells is 0, they stand next to each other to make thicker internal borders. We can counter this by setting the border-collapse CSS property to "collapse".

<table cellspacing="0" style="border-collapse:collapse;">
<tr>...</tr>
</table>
Table with no cellspacing andcollapsed borders
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

Columns style

If you want to assign a particular style to certain table columns, the usual solution is to create a class style and explictly assign cells belonging to those columns to that class.

<style type="text/css">
td { background-color: #eeeeee; }
td.darkcol { background-color: #cccccc; }
</style>

<table>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
</table>

This solution has the advantage to be cross-browser, but it also needs changing the HTML code, to explictly select table cells to be styled.

For browsers supporting adjacent selector there is an alternative pure CSS solution.

<style type="text/css">
/* Style for all rows */
tr { font: bold 16px Arial; }
/* Style for rows with a row before: 2nd, 3rd, 4th, ... */
tr + tr { font: 12px Arial; }

/* Style for all columns */
td { background-color: #cccccc; }
/* Style for rows with a row before: 2nd, 3rd, 4th, 5th */
td + td { background-color: #eeeeee; }
/* Style for rows with 4 rows before: 5th */
td + td + td + td + td { background-color: #cccccc; }
</style>

<table>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table>

 

<style type="text/css"></style>
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell

Fixed header

If a table contain a lot of rows and the user has to scroll to see all the data, header rows can be lost as they are scrolled past. However, you can fix the table to just scroll some of its content whilst anchoring some rows to the top or bottom.

this code does not form part of the original page and it was added by the translator Fr

 

<style type="text/css">
table {
	width: 20em;                    /* esthetics */
	border-collapse: separate;      /* by default */
 	border-spacing: 0;              /* workaround */
}
tbody {
 	height: 10em;               	/* define the height */
	overflow-x: hidden;             /* esthetics */
	overflow-y: auto;               /* allow scrolling cells */
}
td {
	border-left: 1px solid blue;    /* workaround */
	border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead>
    <tfoot><tr><th>Foot</th><th>Foot</th><th>Foot</th></tr></tfoot>
    <tbody>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

 

<style type="text/css"></style>

 

Header Header Header
Foot Foot Foot
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Actually there is a problem with Firefox styling engine (see {{ Bug("135236") }}), which seems not to correctly render tables with collapse border model and TBODY with overflow: auto style. I will ask DEVMO admins...

{{ languages( { "fr": "fr/Astuces_CSS/Tableaux" } ) }}

Revision Source

<p> </p>
<h3 name="Centering">Centering</h3>
<p>If you want to center a table, it is not correct to use</p>
<dl> <dd><code>text-align: center</code>;</dd>
</dl>
<p>in its parent. The correct way is to apply</p>
<dl> <dd><code>margin-left: auto;</code><br> <code>margin-right: auto;</code></dd>
</dl>
<p>style to the table itself.</p>
<table cellspacing="0" style="border-collapse:collapse; margin: 0px auto 0px auto;"> <tbody> <tr> <td colspan="3" style="border: 1px solid black;">Table with margin-left: auto; margin-right: auto;</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> </tbody>
</table>
<h3 name="Borders">Borders</h3>
<p>By default, tables are rendered with spacing between cells and borders around each of 1 pixel.</p>
<table cellspacing="4"> <tbody> <tr> <td colspan="3" style="border: 1px solid black;">Standard table</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> </tbody>
</table>
<p>If you want to transform the table in a grid, you set its cellspacing attribute to 0.</p>
<p>You can remove the spacing by setting the table's cellspacing attribute to 0.</p>
<dl> <dd><code>&lt;table cellspacing="0"&gt;</code><br> <code>&lt;tr&gt;...&lt;/tr&gt;</code><br> <code>&lt;/table&gt;</code></dd>
</dl>
<table cellspacing="0"> <tbody> <tr> <td colspan="3" style="border: 1px solid black;">Table with no cellspacing</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> </tbody>
</table>
<p>The result is not as expected, and the reason is that the default border model is set to <strong>separate</strong>. With this model each cell has its own border so, when the gap between cells is 0, they stand next to each other to make thicker internal borders. We can counter this by setting the <a href="/en/CSS/border-collapse" title="en/CSS/border-collapse">border-collapse</a> CSS property to "collapse".</p>
<dl> <dd><code>&lt;table cellspacing="0" style="border-collapse:collapse;"&gt;</code><br> <code>&lt;tr&gt;...&lt;/tr&gt;</code><br> <code>&lt;/table&gt;</code></dd>
</dl>
<table cellspacing="0" style="border-collapse:collapse;"> <tbody> <tr> <td colspan="3" style="border: 1px solid black;">Table with no cellspacing andcollapsed borders</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> <tr> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> <td style="border: 1px solid black;">cell content</td> </tr> </tbody>
</table>
<h3 name="Columns_style">Columns style</h3>
<p>If you want to assign a particular style to certain table columns, the usual solution is to create a class style and explictly assign cells belonging to those columns to that class.</p>
<pre>&lt;style type="text/css"&gt;
td { background-color: #eeeeee; }
td.darkcol { background-color: #cccccc; }
&lt;/style&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>This solution has the advantage to be cross-browser, but it also needs changing the HTML code, to explictly select table cells to be <em>styled</em>.</p>
<p>For browsers supporting <em>adjacent selector</em> there is an alternative pure CSS solution.</p>
<pre>&lt;style type="text/css"&gt;
/* Style for all rows */
tr { font: bold 16px Arial; }
/* Style for rows with a row before: 2nd, 3rd, 4th, ... */
tr + tr { font: 12px Arial; }

/* Style for all columns */
td { background-color: #cccccc; }
/* Style for rows with a row before: 2nd, 3rd, 4th, 5th */
td + td { background-color: #eeeeee; }
/* Style for rows with 4 rows before: 5th */
td + td + td + td + td { background-color: #cccccc; }
&lt;/style&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<p> </p>&lt;style type="text/css"&gt;<!--[CDATA[
/* Style for all rows */
table.jazz tr { font: bold 16px Arial; }
/* Style for rows with a row before: 2nd, 3rd, 4th, ... */
table.jazz tr + tr { font: 12px Arial; }

/* Style for all columns */
table.jazz td { background-color: #cccccc; }
/* Style for rows with a row before: 2nd, 3rd, 4th, 5th */
table.jazz td + td { background-color: #eeeeee; }
/* Style for rows with 4 rows before: 5th */
table.jazz td + td + td + td + td { background-color: #cccccc; }
]]-->&lt;/style&gt;
<table class="jazz"> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody>
</table>
<h3 name="Fixed_header">Fixed header</h3>
<p>If a table contain a lot of rows and the user has to scroll to see all the data, header rows can be lost as they are scrolled past. However, you can fix the table to just scroll some of its content whilst anchoring some rows to the top or bottom.</p>
<div class="note">this code does not form part of the original page and it was added by the translator Fr</div>
<p> </p>
<pre>&lt;style type="text/css"&gt;
table {
	width: 20em;                    /* esthetics */
	border-collapse: separate;      /* by default */
 	border-spacing: 0;              /* workaround */
}
tbody {
 	height: 10em;               	/* define the height */
	overflow-x: hidden;             /* esthetics */
	overflow-y: auto;               /* allow scrolling cells */
}
td {
	border-left: 1px solid blue;    /* workaround */
	border-bottom: 1px solid blue;  /* workaround */
}
&lt;/style&gt;

&lt;table&gt;
    &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Header&lt;/th&gt;&lt;th&gt;Header&lt;/th&gt;&lt;th&gt;Header&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
    &lt;tfoot&gt;&lt;tr&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt;
    &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</pre>
<p> </p>&lt;style type="text/css"&gt;<!--[CDATA[
table.fix {
	width: 20em;                    /* esthetics */
	border-collapse: separate;      /* by default */ 
	border-spacing: 0;              /* workaround */
}
table.fix tbody {
	height: 10em;                   /* define the height */
	overflow-x: hidden;             /* esthetics */
	overflow-y: auto;               /* allow scrolling cells */
}
table.fix td {
	border-left: 1px solid blue;    /* workaround */
	border-bottom: 1px solid blue;  /* workaround */
}
]]-->&lt;/style&gt;
<p> </p>
<table class="fix"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tfoot> <tr> <th>Foot</th> <th>Foot</th> <th>Foot</th> </tr> </tfoot> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody>
</table>
<p>Actually there is a problem with Firefox styling engine (see {{ Bug("135236") }}), which seems not to correctly render tables with <em>collapse border model</em> and TBODY with <em>overflow: auto</em> style. I will ask DEVMO admins...</p>
<p>{{ languages( { "fr": "fr/Astuces_CSS/Tableaux" } ) }}</p>
Revert to this revision