The basic structure of a table (table, tr, td)

Basic Structure of Tables (table, tr, td)

HTML tables are defined by the <table> element, which contains rows (<tr>) and cells (<td>). Tables are used to display data in a row-and-column format, where each cell can contain text, images, or other HTML elements.

The table Element

The <table> tag defines an HTML table and serves as the container for all table content. It can include one or more <tr>, <th>, <td>, <caption>, <colgroup>, <thead>, <tbody>, and <tfoot> elements.

<table border="1">
  <!-- Table content -->
</table>

Common attributes:

• border: Defines the width of the table border (in pixels)
• width: Defines the table width (in pixels or percentage)
• cellspacing: Spacing between cells
• cellpadding: Spacing between cell content and borders

The tr Element

The <tr> (table row) element defines a row in a table and contains one or more <td> or <th> elements.

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Row attributes:

• align: Horizontal alignment (left/center/right)
• valign: Vertical alignment (top/middle/bottom)
• bgcolor: Background color

The td Element

The <td> (table data) element defines a standard cell containing table data. Each <td> represents a single cell.

<table>
  <tr>
    <td width="100" colspan="2">Cell spanning two columns</td>
  </tr>
  <tr>
    <td rowspan="2">Cell spanning two rows</td>
    <td>Row 2, Column 2</td>
  </tr>
  <tr>
    <td>Row 3, Column 2</td>
  </tr>
</table>

Key attributes:

• colspan: Number of columns a cell spans
• rowspan: Number of rows a cell spans
• width/height: Cell dimensions
• nowrap: Prevents cell content from wrapping

Header Cells (th)

The <th> element defines a header cell, typically located in the first row or column. Browsers usually display header cells in bold and centered by default.

<table>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>¥10,000</td>
  </tr>
</table>

Table Grouping Elements

Tables can be divided into three sections: header (<thead>), body (<tbody>), and footer (<tfoot>).

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Income</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023-01-01</td>
      <td>¥5,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>¥5,000</td>
    </tr>
  </tfoot>
</table>

Complex Table Example

<table border="1" cellspacing="0" width="80%" align="center">
  <caption>Student Grades</caption>
  <colgroup>
    <col width="20%">
    <col width="30%">
    <col width="25%">
    <col width="25%">
  </colgroup>
  <thead>
    <tr bgcolor="#f0f0f0">
      <th rowspan="2">Student ID</th>
      <th rowspan="2">Name</th>
      <th colspan="2">Grades</th>
    </tr>
    <tr bgcolor="#f0f0f0">
      <th>Theory</th>
      <th>Practical</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Zhang San</td>
      <td>85</td>
      <td>90</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Li Si</td>
      <td>78</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>81.5</td>
      <td>89</td>
    </tr>
  </tfoot>
</table>

Table Accessibility

To enhance accessibility:

1. Use <th> elements with scope attributes to identify headers
2. Add a summary attribute for complex tables
3. Provide a table title using <caption>

<table summary="Q1 2023 Sales Data">
  <caption>Q1 2023 Sales Report</caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Product A</th>
    <th scope="col">Product B</th>
  </tr>
  <tr>
    <th scope="row">January</th>
    <td>120</td>
    <td>150</td>
  </tr>
</table>

Responsive Table Design

For small-screen devices, use CSS to enable horizontal scrolling or alter layout:

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

<div class="table-responsive">
  <table>
    <!-- Wide table content -->
  </table>
</div>

Table Styling Control

Use CSS for better table appearance control:

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #f1f1f1;
}

Table Interaction with JavaScript

Dynamically manipulate tables using JavaScript:

// Add new row
function addRow() {
  const table = document.getElementById("myTable");
  const newRow = table.insertRow();
  
  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  
  cell1.innerHTML = "New Cell 1";
  cell2.innerHTML = "New Cell 2";
}

// Delete row
function deleteRow(row) {
  const table = document.getElementById("myTable");
  table.deleteRow(row.rowIndex);
}

Table Sorting Functionality

Implement client-side table sorting:

function sortTable(n) {
  const table = document.getElementById("myTable");
  let rows, switching, i, x, y, shouldSwitch;
  switching = true;
  
  while (switching) {
    switching = false;
    rows = table.rows;
    
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Table Pagination

For large datasets, implement pagination:

let currentPage = 1;
const rowsPerPage = 5;

function showPage(page) {
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr");
  
  // Hide all rows (skip header)
  for (let i = 1; i < rows.length; i++) {
    rows[i].style.display = "none";
  }
  
  // Show current page rows
  const start = (page - 1) * rowsPerPage + 1;
  const end = start + rowsPerPage;
  
  for (let i = start; i < end && i < rows.length; i++) {
    rows[i].style.display = "";
  }
}

function setupPagination() {
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr").length - 1;
  const pageCount = Math.ceil(rows / rowsPerPage);
  
  const pagination = document.getElementById("pagination");
  pagination.innerHTML = "";
  
  for (let i = 1; i <= pageCount; i++) {
    const btn = document.createElement("button");
    btn.innerText = i;
    btn.addEventListener("click", () => {
      currentPage = i;
      showPage(currentPage);
    });
    pagination.appendChild(btn);
  }
}