HTML Tables

An HTML Table is used to section HTML contents in a tabular form.

HTML Table Example

HTML Table Syntax

• The <table> element is used to define the section of a table
• The <tr> element is used to define a table row
• The <th> element is used to define a table heading
• The <td> element is used to define a table data

Adding Borders to a Table

To add borders to a table you can use the border attribute.

Code for the above example

<table border="1">
</table>

Spacing and Paddings in Tables

Cellspacing are spaces between on table cell to the other, while cellpadding are spaces between the table cell and its inner content.

You can add spacings and padding to HTML Tables by using the cellspacing and cellpadding attributes.

Example

<table border="1" cellspacing="5" cellpadding="5"> <tr>
<td> </td> <td> </td> <td> </td> <td> </td> </tr>
</table>
spaces between the cells
spaces between a cell and its inner content

More Explanation

Look at the live example below, the yellow area shows the table cellspacing and the red area shows the cellpadding.

Collapsing HTML Table Borders

Collapsing an HTML table border means merging the table borders with the cell borders.
This can be done by adding the CSS property border-collapse.

As we have learned in the previous chapter, this can be done using the inline, internal, or external method.

Example 1 below shows how to collapse a table border using a CSS inline style.

Example 1

<table style="border:solid 1px white; border-collapse:collapse">
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr> </table>
CSS codes to make table border collapse.

Example 2 below shows how to collapse a table border in a CSS <style> elements (internal method).

Example 2

table, th, td /* This sets the border of <table>, <th> and <td> elements to 1px, and collaspse their borders.*/
{
border:solid 1px white;
border-collapse:collapse;
}

Separated table borders like above are the default style, but can still be derived by defining border-collapse:seperate in your CSS.

HTML Table Headings

You can also specify a heading for your HTML Tables.
HTML Table headings are derived by using the <th> elements inside the <table> elements.

The difference between a table data and a table heading is that the table heading always appear bolder than the table data.

What You Should Know at the End of This Lesson

• You should be able to create an HTML Table.
• You should be able to collapse the borders in an HTML Table.
• You should be able to distinguish between cellpadding and cellspacing.
• You should be able to make a Table Heading.