HTML - Table

An HTML table allows web developers to arrange complex data—such as financial reports, student marks, timetables, and product inventories—into a structured matrix of rows and columns. Tables are defined with the <table> element along with essential building blocks like <tr> (table rows), <th> (header cells), and <td> (data cells).

A table is divided into rows, and each row is divided into data cells. The letters td stand for "table data", which represents the actual content of a cell. A data cell can hold plain text, images, hyperlinks, lists, forms, or even nested tables.

1. Modern HTML5 Table Anatomy

In standard HTML5, well-structured tables use semantic group elements that divide the data into clear logical sections for accessibility and styling:

<caption>: Defines an accessible title or summary placed at the top of the table.
<thead>: Groups the header row(s) containing column titles.
<tbody>: Contains the main body of data records.
<tfoot>: Contains summary rows (such as totals, averages, or footnotes).

2. Core Table Tags & Traditional Attributes

Below is a reference of the traditional attributes associated with the <table> element. While traditional attributes are frequently asked in university BCA exams, modern industry standard dictates using CSS for presentation.

Attribute	Traditional Function	Modern CSS Equivalent
`border`	Specifies the thickness of the table border in pixels (e.g., `border="1"`).	`border: 1px solid #ccc;`
`cellspacing`	Specifies the pixel space between adjacent cells.	`border-spacing: 0;` or `border-collapse: collapse;`
`cellpadding`	Specifies padding space between cell border and cell content.	`th, td { padding: 10px; }`
`align`	Aligns the table on the page (`left`, `center`, `right`).	`margin: 0 auto;` (for centering)
`width`	Sets total table width in pixels or percentages.	`width: 100%;` or `max-width: 800px;`
`bgcolor`	Sets background color of the entire table or individual row.	`background-color: #f8f9fa;`

3. Table Row (<tr>) & Cell Tags (<th> & <td>)

The <tr> tag defines a horizontal row. Inside a row, we insert either header cells (<th>) or data cells (<td>).

<th> (Table Header): Text inside <th> is automatically bold and centered by default. It signals to screen readers that the cell is a label for that row or column.
<td> (Table Data): Text inside <td> is regular weight and left-aligned by default.

4. Advanced Spanning: Colspan and Rowspan

Often in practical university lab assignments and professional invoices, a single cell must stretch across multiple columns or rows:

colspan="n": Merges n adjacent columns horizontally into a single cell.
rowspan="n": Merges n stacked rows vertically into a single cell.

Example: Colspan & Rowspan in Action

<table border="1" style="border-collapse: collapse; width: 100%;">
  <tr>
    <th rowspan="2">Student Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Theory</th>
    <th>Practical</th>
  </tr>
  <tr>
    <td>Rahul Sharma</td>
    <td>85</td>
    <td>95</td>
  </tr>
</table>

5. Original Inventory Table Example

Here is the foundational inventory example demonstrating simple 3x4 table structure:

<table border="2" height="200" width="100%">
  <tr>
    <th>Item No.</th>
    <th>Item Name</th>
    <th>Item Qty.</th>
  </tr>
  <tr>
    <td>01</td>
    <td>Mouse</td>
    <td>10</td>
  </tr>
  <tr>
    <td>02</td>
    <td>Keyboard</td>
    <td>10</td>
  </tr>
  <tr>
    <td>03</td>
    <td>Monitor</td>
    <td>5</td>
  </tr>
</table>

Output on Webpage

Item No.	Item Name	Item Qty.
01	Mouse	10
02	Keyboard	10
03	Monitor	5

6. Responsive Table Design for Mobile Screens

Standard tables do not naturally squish on narrow mobile screens. If a table has 6+ columns, it will cause horizontal page overflow on smartphones unless wrapped inside a container with overflow-x: auto;:

<div style="overflow-x: auto;">
  <table class="responsive-table">
    <!-- Table data here -->
  </table>
</div>

7. Hands-on Practice Session: Student Semester Grade Sheet

Assignment Scenario: Create a semantic, accessible semester examination grade sheet featuring a caption, colspan for subject categories, rowspan for student details, total calculations in <tfoot>, and clean CSS styling.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Semester Grade Sheet Table</title>
  <style>
    .marksheet-container {
      max-width: 750px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }
    table.grade-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }
    table.grade-table caption {
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
      color: #333;
    }
    table.grade-table th, table.grade-table td {
      border: 1px solid #bbb;
      padding: 10px 12px;
    }
    table.grade-table thead tr {
      background-color: #2c3e50;
      color: #ffffff;
    }
    table.grade-table tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    table.grade-table tfoot {
      background-color: #ecf0f1;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="marksheet-container">
    <table class="grade-table">
      <caption>Veewom Institute of Technology - BCA Semester I Result</caption>
      <thead>
        <tr>
          <th rowspan="2" scope="col">Roll No</th>
          <th rowspan="2" scope="col">Candidate Name</th>
          <th colspan="2" scope="colgroup">Web Programming</th>
          <th colspan="2" scope="colgroup">C Language</th>
          <th rowspan="2" scope="col">Total</th>
        </tr>
        <tr>
          <th scope="col">Theory</th>
          <th scope="col">Lab</th>
          <th scope="col">Theory</th>
          <th scope="col">Lab</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>BCA-101</td>
          <td>Aarav Patel</td>
          <td>88</td>
          <td>48</td>
          <td>82</td>
          <td>45</td>
          <td>263</td>
        </tr>
        <tr>
          <td>BCA-102</td>
          <td>Sneha Sharma</td>
          <td>92</td>
          <td>50</td>
          <td>90</td>
          <td>47</td>
          <td>279</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6" style="text-align: right;">Class Average:</td>
          <td>271</td>
        </tr>
      </tfoot>
    </table>
  </div>

</body>
</html>

8. BCA University Exam Viva Questions

Q1. What is the difference between <th> and <td> in HTML?

<th> defines a header cell; its text is rendered in bold font and centered by default. Screen readers treat <th> as column or row descriptors. <td> defines regular table data; its text is regular weight and left-aligned by default.

Q2. Explain the purpose of 'colspan' and 'rowspan' attributes with an example.

colspan merges two or more horizontal columns into a single data cell (e.g., <td colspan="3"> spans across 3 columns). rowspan merges two or more vertical rows into one cell (e.g., <td rowspan="2"> spans across 2 stacked rows).

Q3. Why are attributes like 'cellspacing' and 'cellpadding' deprecated in HTML5?

HTML5 enforces the principle of separation of concerns: HTML defines data structure and semantics, while CSS handles visual presentation. Attributes like cellpadding, cellspacing, and bgcolor mix styling into the markup. They are superseded by modern CSS properties like padding and border-collapse: collapse;.

Q4. What is the semantic role of <thead>, <tbody>, and <tfoot>?

These structural tags logically partition table rows. When printing long multi-page documents, browser print engines can automatically repeat <thead> and <tfoot> at the top and bottom of each printed page, while scrolling the <tbody> independently.

Q5. Why shouldn't tables be used to design website layouts?

In the late 1990s, developers used nested tables for web page layouts. However, table-based layouts are inaccessible to screen readers, render slowly because browsers must download the entire table before computing column widths, and completely fail responsive mobile design. Modern layouts must be built using CSS Flexbox and CSS Grid.