HTML Table

The HTML table element is utilized to display tabular data in a structured format consisting of rows and columns. Each row of the table can have multiple columns, and the cells within these columns can accommodate various types of content.

We can create such a table using the <table> element, along with the <tr>, <td>, and <th> tags to mark rows, data, and headers, respectively. The table cell can contain not only simple text but also a picture, list, hyperlink, or even another table.

Each table includes:

• ✅ Row: Defined using <tr> (table row).
• ✅ Header: Defined using <th> (table header).
• ✅ Data: Defined using <td> (table data cell).

Even though tables were originally utilized for organizing web pages with sections like headers, navbars, and footers, it is no longer recommended to use tables for displaying tabular data. Instead, HTML5 semantic elements and CSS are now preferred for structuring the layout.

HTML Table Tags

HTML Table Example

An illustration of the HTML table tag is presented above for reference.

<table>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

Output:

Explanation

Below is a basic table consisting of a single header row and four subsequent rows with data. Each row displays the first name, last name, and academic scores of a student.

HTML Table with Border

There are two ways to add borders:

1) HTML border Attribute (Deprecated)

<table border="1">...</table>

Explanation

The border attribute determines the borders of the table and is considered outdated. It is recommended to use CSS for better customization options and modern styling capabilities.

2) CSS Border Property (Recommended)

table, th, td {

  border: 1px solid black;

}

Explanation

Utilizing CSS for styling borders offers flexibility and ease of use. It allows for straightforward customization of table elements, whether it involves a single component or multiple components.

Collapsed Border

Example

table, th, td {

  border: 2px solid black;

  border-collapse: collapse;

}

Explanation

Border collapse is a feature that merges adjacent borders to create a more organized look.

HTML Table with Cell Padding

To add spacing inside cells:

Example

th, td {

  padding: 10px;

}

Explanation

Padding adds extra space inside the cells, enhancing readability and offering visual separation.

You can further combine it with borders.

Example

table, th, td {

  border: 1px solid pink;

  border-collapse: collapse;

}

Explanation

Employing padding in conjunction with borders and a collapsed layout results in creating a table with visually pleasing spacing.

HTML Table Width

Table width can be defined using:

table {

  width: 100%;

}

Example

<table>

  <tr> <th> 1 header </th> <th> 1 header </th> <th> 1 header </th> </tr>

  <tr> <td> 1 data </td> <td> 1 data </td> <td> 1 data </td> </tr>

  <tr> <td> 2 data </td> <td> 2 data </td> <td> 2 data </td> </tr>

</table>

Explanation

In order to ensure that the table adjusts responsively, it is recommended to establish the table width at 100%. This setting allows the table to expand or contract accordingly based on the available space.

HTML Table with colspan

The attribute colspan allows a cell to extend across multiple columns.

Example

<table style="width:100%">

  <tr>

    <th>Name</th>

    <th colspan="2">Mobile No.</th>

  </tr>

  <tr>

    <td>Alina</td>

    <td>7503520801</td>

    <td>9555879135</td>

  </tr>

</table>

Output

Explanation

The second header combines two columns into one under the unified title 'Cell Phone Number.'

HTML Table with rowspan

The attribute rowspan allows a cell to cover multiple rows in a table.

Example

<table>

  <tr> <th> Name </th> <td> Alina </td> </tr>

  <tr> <th rowspan="2"> Mobile No. </th> <td> 7503520801 </td> </tr>

  <tr> <td> 9555879135 </td> </tr>

</table>

Output

Explanation

The mobile number header separates the two mobile numbers by spanning across two rows.

HTML Table with Caption

Use <caption> tag directly after <table>.

Example

<table>

  <caption> Student Records </caption>

  <tr> <th> First_Name </th> <th> Last_Name </th> <th> Marks </th> </tr>

  <tr> <td> Vimal </td> <td> Jaiswal </td> <td> 70 </td> </tr>

</table>

Output

Explanation

The title of a table can be incorporated within the table itself by utilizing the <caption> tag, usually placed above the table for clarity.

Styling Even and Odd Rows

table#alter tr:nth-child(even) {

  background-color: #eee;

}

table#alter tr:nth-child(odd) {

  background-color: #fff;

}

table#alter th {

  background-color: gray;

  color: white;

}

Explanation

Utilizing the :nth-child selector helps improve the readability of table rows, particularly beneficial when dealing with extensive tables.

Additional Table Styling Options

Left-align Headers

th {

  text-align: left;

}

Explanation

By default, headers are aligned at the center to maintain consistency with left-aligned data cells.

Border Spacing

table {

  border-spacing: 5px;

}

Explanation

Introducing spacing between cells, without affecting the content inside them, creates a more relaxed appearance compared to using border collapse.

Background Colour

table#t01 {

  background-color: #f2f2d1;

}

Explanation

This enhances visual distinction against the background color, either to improve readability or to strengthen the brand identity.

Nested Tables

HTML supports the nesting of tables within tables to create more complex layouts.

<table border="5" bordercolor="black">

  <tr>

    <td> Outer Table Cell </td>

    <td>

      <table border="5" bordercolor="grey">

        <tr> <td> Inner Row 1 </td> </tr>

        <tr> <td> Inner Row 2 </td> </tr>

      </table>

    </td>

  </tr>

</table>

Explanation

Nested tables are utilized for situations where there is a need for intricate, hierarchical data structures to be contained within a singular structure.

Supporting Browsers

Conclusion

HTML tables are a crucial element in presenting structured data in rows and columns, utilizing different tags such as <table>, <tr>, <th>, and <td>. Although they were formerly employed in conjunction with layouts, they should now be used exclusively in situations that require tabular information, with the design being accomplished with the assistance of CSS. The facility of colspan, rowspan, <caption>, and embedded tables adds flexibility.

CSS also makes it easier to read through style elements such as borders, padding, colours, and alternate row colouring. Accessibility of semantic tags such as <thead>, <tbody>, and <tfoot> enhances accessibility. Tables receive complete support on all major browsers; therefore, they are stable and effective in displaying data as long as they are properly utilized and styled.