HTML Tables

<table>tag is used to define an HTML table.

With the <table> tag, one or more elements are used to create an HTML table. These elements can be <tr>, <th>and <td>

<tr>element is used to define a table row.

<th> element is used to define a table header.

<td> element is used to define a table cell.

Let’s move further with an example.

Example:

<!DOCTYPE html>
<html>
<body>

<table style="width:60%">
<tr>
<th>Name of Fruits</th>
<th>Name of Vegetables</th>
<th>Name of Colors</th>
</tr>

<tr>
<td>Mango</td>
<td>Potato</td>
<td>Yellow</td>
</tr>

<tr>
<td>Pineapple</td>
<td>Cabbage</td>
<td>Green</td>
</tr>

<tr>
<td>Strawberry</td>
<td>Broccoli</td>
<td>Red</td>
</tr>
</table>

</body>
</html>

Always remember that <td> element acts as the data container of the table.

It can contain all kinds of HTML elements such as text, images, lists, other tables, etc.

When you want to make a complex table, several other elements are need to be used for an HTML table, which include <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody> elements.

Add Border to HTML Table

If you do not specify border in your HTML table, it will be displayed in a browser without a border.

But, you can add a border to your table using the CSS border property.

You have to define the border for both the table as well as the table cells.

Example:

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

This example will create a border for each table cell and one border for the entire table.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<table style="width:60%">
<tr>
<th>Name of Fruits</th>
<th>Name of Vegetables</th>
<th>Name of Colors</th>
</tr>

<tr>
<td>Mango</td>
<td>Potato</td>
<td>Yellow</td>
</tr>

<tr>
<td>Pineapple</td>
<td>Cabbage</td>
<td>Green</td>
</tr>
</table>

</body>
</html>

Add Collapsed Border to HTML Table

If you want to specify your table with one border, like no separate borders for all table cells and a table. The borders will be collapsed to one using the CSS border-collapse property.

Example:

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

Add Border Spacing to HTML Table

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

It is defined using the CSS border-spacing property.

Example:

table {
border-spacing: 5px;
}

Add Cell Padding to HTML Table

Cell padding to an HTML table is used to specify how much space you want between the borders and content of the cell. It is not necessary, because if you do not add cell padding, the table cells will be shown without padding.

CSS padding property is used to set the padding to an HTML table.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 15px;
}

</style>
</head>
<body>

<table style="width:60%">
<tr>
<th>Name of Fruits</th>
<th>Name of Vegetables</th>
<th>Name of Colors</th>
</tr>

<tr>
<td>Mango</td>
<td>Potato</td>
<td>Yellow</td>
</tr>

<tr>
<td>Pineapple</td>
<td>Cabbage</td>
<td>Green</td>
</tr>
</table>

</body>
</html>

Left-align and Right-align Headings

By default, the table headings are centered aligned in an HTML table.

You can align them to left or right using the CSS text-align property.

Example of Left-align:

th {
text-align: left;
}

Example of Right-align:

th {
text-align: right;
}

Span many Columns in HTML Table

If you want to span more than one column for a cell, colspan attribute is used to specify how many columns a cell should span.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 5px;
text-align: left;
}

</style>
</head>
<body>

<table style="width:60%">
<tr>
<th>Name</th>
<th colspan="2" >Email id</th>
</tr>

<tr>
<td>John Wilson</td>
<td>johnw12@gmail.com</td>
<td>jwilson12@gmail.com</td>
</tr>
</table>

</body>
</html>

Span many Rows in HTML Table

If you want to span more than one row for a cell, rowspan attribute is used to specify how many rows a cell should span.

Example:

<table style="width:60%">
<tr>
<th>Name</th>
<td>John Wilson</td>
</tr>

<tr>
<th colspan="2">Email id</th>
<td>johnw12@gmail.com</td>
</tr>

<tr>
<td>jwilson12@gmail.com</td>
</tr>
</table>