HTML Table

Let us start with explaining HTML table with an example.

Number             First Name                       Last Name             Place
1                  Miranda                          Smith                 London
2                  Jake                             Wilson                New York
3                  Mike                             Goodwin               Paris

This table can be defined using HTML. Please refer the code below.

Table defined using HTML

<table style=”width:100%”>
<tr>
<td>Miranda</td>
<td>Smith</td>
<td>London</td>
</tr>
<tr>
<td>Jake</td>
<td>Wilson</td>
<td>New York</td>
</tr>
</table>
 
Please Note:
<table> - Defines Tables
<tr> - Defines Table Rows
<td> - Defines Table Data
<th> - Defines Table Headings

• Table data can contain text, images, lists and other tables.

HTML Table with Border Attribute

A border around the text is never displayed, until it is defined.

Border attribute is used for defining the border.
 
Syntax
<table border=”2” style=”width:100%”>
<tr>
<td>Miranda</td>
<td>Smith</td>
<td>London</td>
</tr>
<tr>
<td>Jake</td>
<td>Wilson</td>
<td>New York</td>
</tr>
</table>


Please Note:
Defining the border using CSS is much better than using HTML attribute.

 
Syntax (Adding borders using CSS)
table, th, td {
border: 2px solid black;
}

Defining border to table and table cells is done separately.

HTML Table: Collapsed Borders

CSS border-collapse is used to collapse border into one.
Syntax
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}

HTML Table with Cell Padding

The space between the cell content and the border is defined by cell padding.

If the padding is not specified, then there appears no padding between table cells and border.
Syntax
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}

HTML Table Headings

<th> tag is defined for table headings.

By default, table headings appear bold and centered.
Syntax
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Place</th>
</tr>
<tr>
<td>Jake</td>
<td>Wilson</td>
<td>New York</td>
</tr>
</table>

Please Note: CSS text-align property is used for aligning the position of the text.

Syntax
th {
text-align: right;
}

HTML Table with Border Spacing

To define the spacing between the cells, border spacing is used.

Syntax
table {
border-spacing: 7px;
}

Table Cells to Span Many Columns

To use the cell using more than one column, colspan attribute is used.

Syntax
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2”>Contact</th>
</tr>
<tr>
<td>Jack Wilson</td>
<td>283735273</td>
<td>739273638</td>
</tr>
</table>

Table Cells to Span Many Rows

To use the cell using more than one column, rowspan attribute is used.

Syntax
<table style=”width:100%”>
<tr>
<th>Name</th>
<th rowspan=”2”>Contact</th>
</tr>
<tr>
<td>Jack Wilson</td>
<td>283735273</td>
<td>739273638</td>
</tr>
</table>

HTML Table – Adding a Caption

Use <caption> tag, to add caption to a table.

Syntax
<table style=”width:100%”>
<caption>Employee Records</caption>
<tr>
<th>Name</th>
<th>Contact Number</th>
</tr>
<tr>
<td>Jack Wilson</td>
<td>283735273</td>
</tr>
</table>

Please Note: <caption> tag is used immediately after <table> tag.

Working With One Table

In order to add special style for a table, id attribute is used.

Syntax
<table id=”a001”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Contact Number</th>
</tr>
<tr>
<th>Jack</th>
<th>Wilson</th>
<th>7637832983</th>
</tr>
</table>

Defining the style for table mentioned in above code:

table#a001 {

width:100%;

background-color:#ffffff;

}

This will make the changes to the background color of the table.

Let Us Do a Quick Revision
<table>              To define a table
<tr>                 To define a table row
<td>                 To define a table column
<th>                 To define a table heading
<caption>            To define a table caption
border               To define a border
border-collapse      To collapse the cell borders
padding              To add padding to the cells
text-align           To align the cell text
border-spacing       To define the spacing between the cells
rowspan              To make a cell span many rows
colspan              To make a column span many sows
id                   To add style to a table
<colgroup>           To add one or more columns in a table
<col>                To add a style to each column lying within a <colgroup>
<thead>              To group the header in a table
<tbody>              To group the body content in a table
<tfoot>              To group the footer content in a table
email