Tables

Tables

by

Structure of a table: <table>, <tr>, <td>, <th>

Contents hide
1) Structure of a table: <table>, <tr>, <td>, <th>
1.1) Basic Tags and Their Roles
2) Table headers and captions
2.1) <th> – Table Header Cells
2.2) <caption> – Table Title or Description
3) Merging cells: colspan, rowspan
3.1) colspan – Merge Columns
3.2) rowspan – Merge Rows
4) Styling basics (borders, spacing)
4.1) 1. Table Borders
4.2) 2. Cell Spacing vs. Cell Padding
4.3) 3. Alignment (Text and Content)
4.4) 4. Table Width, Height, and Background

HTML tables are used to display tabular data (like spreadsheets or schedules) in a structured row-and-column format using key tags: <table>, <tr>, <td>, and <th>.

Basic Tags and Their Roles

Tag Meaning Description
<table> Table container Wraps all table elements (rows and cells)
<tr> Table row Defines a single row of data
<td> Table data cell Defines a standard data cell inside a row
<th> Table header cell Used for header cells; usually bold and centered by default

Simple Table Example:

<table border=”1″>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>

What’s Happening:

  • <table> wraps the entire table.
  • The first <tr> contains <th> for column headings.
  • The following <tr> tags contain <td> elements for actual data.

Additional Tips:

  • Use border, cellpadding, and cellspacing (via CSS or attributes) for spacing/styling.
  • Use <thead>, <tbody>, and <tfoot> for semantic structure (especially helpful in long tables).
  • Use CSS for styling (e.g., zebra striping rows, hover effects, border collapse).

Table headers and captions

Adding headers and a caption to HTML tables enhances readability, accessibility, and structure, especially when presenting complex data.

<th> – Table Header Cells

The <th> (table header) tag is used to define column or row headings. These cells are typically bold and centered by default.

Syntax:

<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>

Attributes:

  • scope=”col” → Declares the header for a column.
  • scope=”row” → Declares the header for a row.
  • Improves accessibility for screen readers.

Example with Scope:

<tr>
<th scope=”col”>Name</th>
<th scope=”col”>Email</th>
</tr>
<tr>
<th scope=”row”>John</th>
<td>john@example.com</td>
</tr>

<caption> – Table Title or Description

The <caption> tag provides a short title or summary for the table and appears above the table by default.

Example:

<table border=”1″>
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>

Notes:

  • The <caption> tag must be the first child of the <table>.
  • Useful for accessibility and context in printed or screen-reader views.

Best Practices

  • Always use <th> for headers instead of styling <td> elements.
  • Use scope or id/headers attributes for better accessibility.
  • Keep <caption> concise and descriptive.
  • Style captions with CSS (e.g., caption-side: bottom; to move it below).

Merging cells: colspan, rowspan

In HTML tables, you can merge cells horizontally and vertically using the colspan and rowspan attributes on <td> or <th> elements to better structure complex data.

colspan – Merge Columns

Definition:

  • The colspan attribute allows a cell to span across multiple columns.

Example:

<table border=”1″>
<tr>
<th colspan=”2″>Employee Info</th>
</tr>
<tr>
<td>Name</td>
<td>John</td>
</tr>
</table>

Result:

Employee Info

Name

  • The header cell spans 2 columns.

rowspan – Merge Rows

Definition:

  • The rowspan attribute allows a cell to span across multiple rows.

Example:

<table border=”1″>
<tr>
<th rowspan=”2″>Department</th>
<td>HR</td>
</tr>
<tr>
<td>Finance</td>
</tr>
</table>

The header cell spans 2 rows vertically.

Combining colspan and rowspan

  • You can use both attributes together to build complex layouts.

Example:

<table border=”1″>
<tr>
<th rowspan=”2″ colspan=”2″>Employee</th>
<td>Salary</td>
</tr>
<tr>
<td>$50,000</td>
</tr>
</table>

Tips and Best Practices

  • Adjust other rows and columns accordingly when using rowspan or colspan.
  • Always ensure your table structure remains logically aligned.
  • Use CSS for visual enhancements rather than layout merging unless necessary.

Styling basics (borders, spacing)

Styling HTML tables improves readability, aesthetics, and usability. Here’s a detailed guide to applying basic styles like borders, spacing, and alignment using both HTML attributes and CSS.

1. Table Borders

Inline Attribute (HTML):

<table border=”1″>

Adds simple borders to the table and cells.

CSS Styling (Recommended):

table, th, td {
border: 1px solid black;
border-collapse: collapse; /* Removes double borders */
}

2. Cell Spacing vs. Cell Padding

cellspacing – Space between cells (HTML attribute or CSS border-spacing)

<table cellspacing=”10″>

Or with CSS:

table {
border-spacing: 10px;
}

cellpadding – Space inside cells (HTML attribute or CSS padding)

<table cellpadding=”10″>

Or with CSS:

th, td {
padding: 10px;
}

3. Alignment (Text and Content)

th {
text-align: center;
vertical-align: middle;
}
td {
text-align: left;
}

4. Table Width, Height, and Background

table {
width: 80%;
background-color: #f9f9f9;
}

th {
background-color: #e0e0e0;
}

Example (CSS Embedded in HTML):

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>

<table>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Alice</td>
<td>Developer</td>
</tr>
</table>

Pro Tip:

For modern, responsive styling, consider using CSS frameworks like Bootstrap or utility libraries like Tailwind CSS.

Leave a Comment