HTML Tables

<< Previous

Next Chapter >>

HTML Table Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Try it Yourself

Defining an HTML Table

An HTML table is defined by using the <table> tag.

Each of the table row is written with the <tr> tag. A table header is given with the <th> tag. During default settings, table headings are alreau bold and centered. A table data or cell is defined using the <td> tag.

Example

<table style="width:100%">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
<td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

Try it Yourself

Note: The elements are considered to be the data containers of the table.They almost can contain all sorts of contents belonging HTML elements; text, images, lists, other tables, etc.

HTML Table - Adding a Border

If you do are specifying a border for the table, i is not going to displayed without any borders.

A border is set by making use of the CSS border property:

Example

table, th, td {
border: 1px solid black;
}

Try it Yourself

Please make sure to remember that defining of borders to be done for both the table and the table cells.

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Try it Yourself

HTML Table - Adding Cell Padding

Cell padding is used to specify the space between the cell content and its borders.

If you are not specifying a padding, the table cells will get displayed without padding.

For setting up of the padding, use the CSS padding property:

Example

th, td {
padding: 15px;
}

Try it Yourself

HTML Table - Left-align Headings

When in default settings, table headings are displayed as bold and centered.

For left-aligning the table headings, make use of the CSS text-align property:

Example

th {
text-align: left;
}

Try it Yourself

HTML Table - Adding Border Spacing

Border spacing is used to specify the space between the cells.

For setting up of the border spacing for a table, make use of the CSS border-spacing property:

Example

table {
border-spacing: 5px;
}

Try it Yourself

Note: If the table has a collapsed borders, border-spacing does not have any effects.

HTML Table - Cells that Span Many Columns

Inorder to make a cell span to be more than one column, use the colspan attribute is needed:

Example

<table style="width:100%">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
</tr>
</table>

Try it Yourself

HTML Table - Cells that Span Many Rows

For making a cell spanning to more than one row, make use of the the rowspan attribute:

Example

<table style="width:100%">
<tr>
    <th>Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
</tr>
<tr>
    <td>55577855</td>
</tr>
</table>

Try it Yourself

HTML Table - Adding a Caption

For adding a caption to a table, the tag should be used:

Example

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$50</td>
</tr>
</table>

Try it Yourself

Note: The <caption> tag should be inserted immediately after the <table> tag.

A Special Style for One Table

For defining a special style for a special table, adding an id attribute to the table is required:

Example

<table id="t01">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

Try it Yourself

And add more styles:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Try it Yourself

Chapter Summary

make use of the HTML <table> element for defining a table
mae use the HTML <tr> element for defining a table row
make use the HTML <td> element for defining a table data
make use the HTML <th> element for defining a table heading
make use of the HTML <caption> element for defining a table caption
make use of the CSS border property for defining a border
make use of the CSS border-collapse property for collapsing cell borders
make use of the CSS padding property for additon of padding to cells
make use of the CSS text-align property for aligning cell text
make use of the CSS border-spacing property to change the spacing between cells
make use of the CSS colspan attribute for making a cell span many columns
make use of the CSS rowspan attribute for making a cell span many rows
Make use of the CSS id attribute for uniquely defining a table

Test Yourself with Exercises

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6

HTML Table Tags

Tag	Description
<table>	Used to define a table
<th>	Used to define a header cell in a table
<tr>	Used to define a row in a table
<td>	Used to define a cell in a table
<caption>	Used to define a table caption
<colgroup>	Used to define a group of one or more columns in a table for formatting
<col>	Used to define column properties for each column within a <colgroup> element
<thead>	helps to groups the header content o a table
<tbody>	helps to groups the body content in a table
<tfoot>	helps to groups the footer content in a table /td>

<< Previous

Next Chapter >>

HTML Tables

Top Tutorials

Top References

Top Examples

Web Certificates