Building Tables

Yaser Rahmati | یاسر رحمتی

Building tables in HTML involves using several key tags to structure data in rows and columns. Here's how to do it:

Basic Structure of a Table

The main tags used for creating tables are:

  • <table>: Defines the table.

  • <tr>: Defines a table row.

  • <th>: Defines a header cell.

  • <td>: Defines a data cell.

Example of a Simple Table

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>Los Angeles</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>35</td>
    <td>Chicago</td>
  </tr>
</table>

This will render a table with three columns: Name, Age, and City.

Breakdown of Tags

  • <table>: This tag creates the table itself.

  • <tr>: Table row. Each <tr> creates a new row.

  • <th>: Table header cell. These are bold by default and appear at the top of the table.

  • <td>: Table data cell. These hold the actual data inside the table.

Adding Borders and Spacing

By default, HTML tables don’t have borders or spacing between cells. You can add them using the border attribute or better yet, using CSS.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
</table>

This will create a table with borders around the cells. But it’s more modern to use CSS for styling:

<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid black;">Name</th>
    <th style="border: 1px solid black;">Age</th>
    <th style="border: 1px solid black;">City</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">John</td>
    <td style="border: 1px solid black;">25</td>
    <td style="border: 1px solid black;">New York</td>
  </tr>
</table>

Table with Rowspan and Colspan

You can also merge cells across rows and columns using rowspan and colspan.

Colspan Example:

Merges two columns together.

<table border="1">
  <tr>
    <th colspan="2">Full Name</th>
  </tr>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

This creates a header spanning across two columns.

Rowspan Example:

Merges cells across multiple rows.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>25</td>
  </tr>
</table>

This creates a table where the "Name" cell spans across two rows.

Adding a Caption

A table can also have a caption to describe its content.

<table border="1">
  <caption>Student Information</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Example of a Full Table

<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h2>Student Information</h2>
  <table>
    <caption>Class 101 - Student List</caption>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>22</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>23</td>
      <td>A</td>
    </tr>
  </table>
</body>
</html>

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousCreating ListsNextHTML Forms

Last updated