⬅ Previous Next ➡

13. Tables in HTML

Tables in HTML
  • HTML Tables: Used to arrange data like text, images, and links into rows and columns. They are ideal for displaying structured information like schedules, price lists, or search results.
  • Basic Table Tags:
    • <table>: The main container that defines the start and end of a table.
    • <tr> (Table Row): Defines a horizontal row of cells.
    • <th> (Table Header): Defines a header cell. The text is bold and centered by default.
    • <td> (Table Data): Defines a standard data cell. The text is regular and left-aligned by default.
  • Advanced Table Attributes:
    • border: Adds a border around the table and cells (e.g., border="1").
    • colspan: Used to make a cell span across multiple columns.
    • rowspan: Used to make a cell span across multiple rows.
    • cellpadding & cellspacing: Used to control the space inside and between cells (largely replaced by CSS today).
  • Table Structure Elements:
    • <thead>: Groups the header content.
    • <tbody>: Groups the main body content.
    • <tfoot>: Groups the footer content (e.g., totals).

<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Tag Examples</title>
</head>

<body>

<h2>HTML Tables (&lt;table&gt; Tag)</h2>

<!-- Example 1: Basic Table -->
<h3>Example 1: Basic Student Table</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Course</th>
  </tr>
  <tr>
    <td>101</td>
    <td>John Doe</td>
    <td>HTML5</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Jane Smith</td>
    <td>CSS3</td>
  </tr>
</table>

<!-- Example 2: Table with Caption -->
<h3>Example 2: Table with Caption</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <caption>Student Marks List</caption>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>HTML</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>CSS</td>
    <td>90</td>
  </tr>
</table>

<!-- Example 3: Using Colspan (Merging Columns) -->
<h3>Example 3: Using Colspan</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Name</th>
    <th colspan="2">Phone Numbers</th>
  </tr>
  <tr>
    <td>Meher</td>
    <td>123-456</td>
    <td>789-012</td>
  </tr>
</table>

<!-- Example 4: Using Rowspan (Merging Rows) -->
<h3>Example 4: Using Rowspan</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Category</th>
    <th>Product</th>
  </tr>
  <tr>
    <td rowspan="2">Electronics</td>
    <td>Laptop</td>
  </tr>
  <tr>
    <td>Mobile</td>
  </tr>
</table>

<!-- Example 5: Table with thead, tbody, tfoot -->
<h3>Example 5: thead, tbody, tfoot</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Pen</td>
      <td>5</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Notebook</td>
      <td>2</td>
      <td>50</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th>110</th>
    </tr>
  </tfoot>
</table>

<!-- Example 6: Nested Table (Table inside a table cell) -->
<h3>Example 6: Nested Table</h3>
<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Student</th>
    <th>Details</th>
  </tr>
  <tr>
    <td>Sourav</td>
    <td>
      <table border="1" cellpadding="6" cellspacing="0">
        <tr>
          <th>Subject</th>
          <th>Marks</th>
        </tr>
        <tr>
          <td>HTML</td>
          <td>88</td>
        </tr>
        <tr>
          <td>CSS</td>
          <td>92</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>
⬅ Previous Next ➡