HTML Tables

An HTML table is comprised of table rows and columns, much like Excel rows and columns. HTML tables are container elements which are used to hold text and other html elements. A table element consists of other HTML tags which are <table> tag, <tr> tag, <th> tag and <td> tag.

Table rows are defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table cell is defined with the <td> tag.

HTML Table Syntax

<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jackson</td>
<td>32</td>
</tr>
<tr>
<td>Larry</td>
<td>27</td>
</tr>
</table>

HTML Table Borders

CSS border property is used t set table borders. If you do not specify a border for the table, it will be displayed without borders.

Example

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

CSS border-collapse property is used to collapse borders into one border.

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

HTML Table Cell Padding

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

Example

th, td {
padding: 15px;
}

HTML Table colspan Attribute

The colspan attribute is used to make a cell span more than one column.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table rowspan Attribute

The rowspan attribute is used to make a cell span more than one row.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<td>Larry</td>
</tr>
<tr>
<th rowspan="2">Cources Enrolled</th>
<td>Data Science</td>
</tr>
<tr>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table Caption

The <caption> tag used to add a caption to a table.

Example

<table style="width:100%">
<caption>Cource Registeration</caption>
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>