HTML Table

HTML table provides a way to derive or define the data such as text, images, links, etc in terms of rows and columns of cells. HTML Tables are used for formatting data using Rows and Columns.

It is used to display data in tabular form (row * column). There can be many columns in a row. An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

In Each table, the table row is defined by <tr> tag, the table header is defined by <th>, and table data is defined by <td> tags.

Tag	Description
<table>	This HTML Tag defines a table.
<tr>	This Tag defines a row in a table.
<th>	This Tag defines a header cell in a table.
<td>	This Tag defines a cell in a table.
<caption>	This tag is used for the table caption.
<colgroup>	It specifies a group of one or more columns in a table for formatting.
<col>	This HTML Tag is used with <colgroup> element to specify column properties for each column in HTML Table.
<tbody>	It is used to group the body content in an HTML table.
<thead>	It is used to group the header content in a table.
<tfooter>	It is used to group the footer content in a table.

Basic HTML Table Usage

A basic HTML Table will have all the attributes like <td, <tr>,<th>, and <table>.

<body>

   <table>

 

         <tr>

 

            <th>Name</th>

            <th>Country</th>

 

         </tr>

 

         <tr>

 

            <td>Dhoni</td>

 

            <td>India</td>

 

         </tr>

         <tr>

 

            <td>David Miller</td>

            <td>South Africa</td>

         </tr>

 

   </table>

</body>

Test Yourself

Table Caption

The caption for the table is specified by using the <caption> tag. It is used to describe the table.

<body>

   <table border = "1">

         <caption>This is table caption</caption>

         <tr>

            <th>Name</th>

            <th>Country</th>

         </tr>

         <tr>

            <td>Dhoni</td>

            <td>India</td>

         </tr>

         <tr>

            <td>David Miller</td>

            <td>South Africa</td>

         </tr>

   </table>

</body>

Test Yourself

HTML Table Cell Spacing

The space of the table cells can be defined by using the "cellspacing" attribute. The "cellspacing" attribute specifies the space between table cells.

<body>

   <table border = "1" cellspacing="15">

         <caption>This is table caption</caption>

         <tr>

            <th>Name</th>

            <th>Country</th>

         </tr>

         <tr>

            <td>Dhoni</td>

            <td>India</td>

         </tr>

         <tr>

            <td>David Miller</td>

            <td>South Africa</td>

         </tr>

   </table>

</body>

Test Yourself

HTML Table Cell Padding

The padding of table cells can be defined using the "cellpadding" attribute. The "cellpadding" attribute determines the distance between the table cell border and the data within the cell.

<body>

   <table border = "1" cellpadding="15">

         <caption>This is table caption</caption>

         <tr>

            <th>Name</th>

            <th>Country</th>

         </tr>

         <tr>

            <td>Dhoni</td>

            <td>India</td>

         </tr>

         <tr>

            <td>David Miller</td>

            <td>South Africa</td>

         </tr>

   </table>

</body>

Test Yourself

HTML Table Colspan and Rowspan

Multiple HTML table rows can be merged into a single row by using the "rowspan" attribute, while multiple table columns can be merged into a single column by using the "colspan" attribute.

<body>

   <table border = "1">

         <tr>

            <th>Column One</th>

            <th>Column Two</th>

            <th>Column Three</th>

         </tr>

         <tr>

            <td rowspan = "2">Row One</td>

            <td>Row Two</td>

            <td>Row Three</td>

         </tr>

         <tr>

            <td>Row Four</td>

            <td>Row Five</td>

         </tr>

         <tr>

            <td colspan = "3">Row Six</td>

         </tr>

   </table>

</body>

Test Yourself

Setting colors for Table

To create a background color for a table, you can use the "bgcolor" attribute. To specify the border color for table cells, you can use the "border-color" attribute.

<body>

   <table border = "1" bordercolor = "red" bgcolor = "lightblue">

         <tr>

         <th>Name</th>

         <th>Country</th>

         </tr>

         <tr>

         <td>Dhoni</td>

         <td>India</td>

         </tr>

   </table>

</body>

Test Yourself

Table Height and Width

The height and width of the table can be set by using width and height attributes.

<body>

   <table border = "1" width = "500" height = "250">

         <tr>

         <th>Name</th>

         <th>Country</th>

         </tr>

         <tr>

         <td>Dhoni</td>

         <td>India</td>

         </tr>

   </table>

</body>

Test Yourself

Nested Table

We can also embed one table inside another table known as a nested table.

<body>

   <table border = "1">

         <tr>

         <td>

         <table border = "1">

         <tr>

         <th>Name</th>

         <th>Country</th>

         </tr>

         <tr>

         <td>Dhoni</td>

         <td>India</td>

         </tr>

         </table>

         </td>

         </tr>

     </table>

</body>

Test Yourself