CS306 - Web Programming: HTML

2. HTML Tables

˿ Back to homepage

HTML tables are used to display data in a structured, grid-like format. They are created using the <table> element, with rows defined by <tr> (table row), headers by <th> (table header), and data cells by <td> (table data). Tables are useful for organizing information like schedules, pricing, or comparisons, making it easy for users to read and understand complex data. Proper use of tables improves both the presentation and accessibility of content on a webpage.

2.1. Creating a simple table

<table>
<tr>
    <th>#</th>
    <th>Emp. Code</th>
    <th>Emp. Name</th>
    <th>DOB</th>
    <th>Department</th>
    <th>Remotely</th>
</tr>
<tr>
    <td>1</td>
    <td>1234</td>
    <td>John Doe</td>
    <td>19/10/1985</td>
    <td>IT</td>
    <td>Yes</td>
</tr>
<tr>
    <td>2</td>
    <td>1235</td>
    <td>Emily Clark</td>
    <td>10/9/1987</td>
    <td>IT</td>
    <td>Yes</td>
</tr>    <tr>
    <td>3</td>
    <td>1236</td>
    <td>Sam Smith</td>
    <td>1/12/1990</td>
    <td>IT</td>
    <td>Yes</td>
</tr>
<tr>
    <td>4</td>
    <td>1237</td>
    <td>Alan Johnson</td>
    <td>7/11/2001</td>
    <td>IT</td>
    <td>No</td>
</tr>
<tr>
    <td>5</td>
    <td>1238</td>
    <td>Sarah Walker</td>
    <td>15/1/1991</td>
    <td>IT</td>
    <td>No</td>
</tr>
</table>
# Emp. Code Emp. Name DOB Department Remotely
1 1234 John Doe 19/10/1985 IT No
2 1235 Emily Clark 10/9/1987 IT Yes
3 1236 Sam Smith 1/12/1990 IT Yes
4 1237 Alan Johnson 7/11/2001 IT No
5 1238 Sarah Walker 15/1/1991 IT No

2.2. Creating a bordered table

<table border="1">
<tr>
    <th>#</th>
    <th>Emp. Code</th>
    <th>Emp. Name</th>
    <th>DOB</th>
    <th>Department</th>
    <th>Remotely</th>
</tr>
<tr>
    <td>1</td>
    <td>1234</td>
    <td>John Doe</td>
    <td>19/10/1985</td>
    <td>IT</td>
    <td>No</td>
</tr>
<tr>
    <td>2</td>
    <td>1235</td>
    <td>Emily Clark</td>
    <td>10/9/1987</td>
    <td>IT</td>
    <td>Yes</td>
</tr>    <tr>
    <td>3</td>
    <td>1236</td>
    <td>Sam Smith</td>
    <td>1/12/1990</td>
    <td>IT</td>
    <td>Yes</td>
</tr>
<tr>
    <td>4</td>
    <td>1237</td>
    <td>Alan Johnson</td>
    <td>7/11/2001</td>
    <td>IT</td>
    <td>No</td>
</tr>
<tr>
    <td>5</td>
    <td>1238</td>
    <td>Sarah Walker</td>
    <td>15/1/1991</td>
    <td>IT</td>
    <td>No</td>
</tr>
</table>
# Emp. Code Emp. Name DOB Department Remotely
1 1234 John Doe 19/10/1985 IT No
2 1235 Emily Clark 10/9/1987 IT Yes
3 1236 Sam Smith 1/12/1990 IT Yes
4 1237 Alan Johnson 7/11/2001 IT No
5 1238 Sarah Walker 15/1/1991 IT No

The border attribute in the <table> element is used to define the width of the border around the table and its cells. By default, tables are displayed without borders, but adding the border attribute with a numeric value (e.g., border="1") creates a visible border around the table and its cells. While the border attribute is simple to use, it is considered outdated in modern HTML. Instead, CSS is recommended for styling tables, as it provides more control over border appearance, such as color, thickness, and style. Using CSS ensures better design consistency and adherence to modern web standards.

2.3. thead,tbody and tfoot

<table border="1">
<thead>
    <tr>
        <th>#</th>
        <th>Emp. Code</th>
        <th>Emp. Name</th>
        <th>DOB</th>
        <th>Department</th>
        <th>Remotely</th>
        <th>Salary</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>1234</td>
        <td>John Doe</td>
        <td>19/10/1985</td>
        <td>IT</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1235</td>
        <td>Emily Clark</td>
        <td>10/9/1987</td>
        <td>IT</td>
        <td>Yes</td>
        <td>$150,000</td>
    </tr>    <tr>
        <td>3</td>
        <td>1236</td>
        <td>Sam Smith</td>
        <td>1/12/1990</td>
        <td>IT</td>
        <td>Yes</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>4</td>
        <td>1237</td>
        <td>Alan Johnson</td>
        <td>7/11/2001</td>
        <td>IT</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>5</td>
        <td>1238</td>
        <td>Sarah Walker</td>
        <td>15/1/1991</td>
        <td>IT</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>

</tbody>
<tfoot>
    <tr>
        <td>Total</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>$750,000</td>
    </tr>

</tfoot>
</table>
# Emp. Code Emp. Name DOB Department Remotely Salary
1 1234 John Doe 19/10/1985 IT No $150,000
2 1235 Emily Clark 10/9/1987 IT Yes $150,000
3 1236 Sam Smith 1/12/1990 IT Yes $150,000
4 1237 Alan Johnson 7/11/2001 IT No $150,000
5 1238 Sarah Walker 15/1/1991 IT No $150,000
Total $750,000

The <thead>, <tbody>, and <tfoot> elements in HTML are used to semantically structure the content of a table. The <thead> element defines the header section of a table, typically containing column labels wrapped in <th> tags. The <tbody> element represents the main content of the table, where data rows are placed using <tr> and <td> tags. The <tfoot> element is used for the footer section, often summarizing or providing additional information about the table data. These elements improve accessibility, enable better styling with CSS, and allow browsers to render tables more efficiently, especially for large datasets. Proper use of <thead>, <tbody>, and <tfoot> ensures a well-organized and meaningful table structure.

2.4. Spanning mutiple rows and columns

<table border="1">
<thead>
<tr>
    <th>#</th>
    <th>Emp. Code</th>
    <th>Emp. Name</th>
    <th>DOB</th>
    <th>Department</th>
    <th>Remotely</th>
    <th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>1234</td>
    <td >John Doe</td>
    <td>19/10/1985</td>
    <td rowspan="5">IT</td>
    <td>No</td>
    <td>$150,000</td>
</tr>
<tr>
    <td>2</td>
    <td>1235</td>
    <td>Emily Clark</td>
    <td>10/9/1987</td>
    <td>Yes</td>
    <td>$150,000</td>
</tr>    <tr>
    <td>3</td>
    <td>1236</td>
    <td>Sam Smith</td>
    <td>1/12/1990</td>
    <td>Yes</td>
    <td>$150,000</td>
</tr>
<tr>
    <td>4</td>
    <td>1237</td>
    <td>Alan Johnson</td>
    <td>7/11/2001</td>
    <td>No</td>
    <td>$150,000</td>
</tr>
<tr>
    <td>5</td>
    <td>1238</td>
    <td>Sarah Walker</td>
    <td>15/1/1991</td>
    <td>No</td>
    <td>$150,000</td>
</tr>

</tbody>
<tfoot>
<tr>
    <td colspan="6">Total Salary</td>
    <td >$750,000</td>
</tr>

</tfoot>
</table>
# Emp. Code Emp. Name DOB Department Remotely Salary
1 1234 John Doe 19/10/1985 IT No $150,000
2 1235 Emily Clark 10/9/1987 Yes $150,000
3 1236 Sam Smith 1/12/1990 Yes $150,000
4 1237 Alan Johnson 7/11/2001 No $150,000
5 1238 Sarah Walker 15/1/1991 No $150,000
Total Salary $750,000

In HTML, the colspan and rowspan attributes are used to merge cells in a table, allowing a single cell to span multiple columns or rows. The colspan attribute specifies how many columns a cell should span horizontally, while the rowspan attribute defines how many rows a cell should span vertically. These attributes are applied to <th> or <td> elements and are useful for creating complex table layouts, such as headers that span multiple columns or cells that combine data across rows. Proper use of colspan and rowspan enhances the readability and organization of tables, making them more effective for presenting structured data. However, overusing these attributes can make tables harder to maintain and less accessible, so they should be used thoughtfully.

2.5. col and colgroup

<table border="1" style="text-align:center">
<colgroup>
    <col style="background-color: #f2f2f2">
    <col style="background-color: #e6f7ff">
    <col style="background-color: #fff3e6">
    <col style="background-color: #f9e6ff">
    <col style="background-color: #e6ffe6">
    <col style="background-color: #ffe6e6">
    <col style="background-color: #e6e6ff">
</colgroup>

<thead>
    <tr>
        <th>#</th>
        <th>Emp. Code</th>
        <th>Emp. Name</th>
        <th>DOB</th>
        <th>Department</th>
        <th>Remotely</th>
        <th>Salary</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>1234</td>
        <td>John Doe</td>
        <td>19/10/1985</td>
        <td rowspan="5">IT</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1235</td>
        <td>Emily Clark</td>
        <td>10/9/1987</td>
        <td>Yes</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>1236</td>
        <td>Sam Smith</td>
        <td>1/12/1990</td>
        <td>Yes</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>4</td>
        <td>1237</td>
        <td>Alan Johnson</td>
        <td>7/11/2001</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>
    <tr>
        <td>5</td>
        <td>1238</td>
        <td>Sarah Walker</td>
        <td>15/1/1991</td>
        <td>No</td>
        <td>$150,000</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="6">Total Salary</td>
        <td>$750,000</td>
    </tr>
</tfoot>
</table>
# Emp. Code Emp. Name DOB Department Remotely Salary
1 1234 John Doe 19/10/1985 IT No $150,000
2 1235 Emily Clark 10/9/1987 Yes $150,000
3 1236 Sam Smith 1/12/1990 Yes $150,000
4 1237 Alan Johnson 7/11/2001 No $150,000
5 1238 Sarah Walker 15/1/1991 No $150,000
Total Salary $750,000

The <col> and <colgroup> elements in HTML are used to apply styles or attributes to columns in a table. The <colgroup> element groups one or more <col> elements, which represent individual columns. These elements allow you to style entire columns without repeating styles for each cell. For example, you can set background colors, widths, or alignment for specific columns. The <colgroup> and <col> elements are placed inside the <table> tag, before the table content. While they don’t change the structure of the table, they make it easier to manage column-specific styling and improve maintainability.