Tables

HTML tables let you organize data in neat rows and columns, kind of like a spreadsheet. They’re great for displaying structured information, and you can style them to look pretty awesome too. In this guide, we’ll go over the basics of HTML tables, important attributes, and how to make them look better with some CSS.

Basic Table Structure ( < table >, < tr >, < th >, < td >)

To create a table in HTML, you use a few key elements:

<table>: This holds the entire table.
<tr>: Each row in the table.
<th>: Header cells (usually bold and centered).
<td>: Regular data cells.

Basic Example:

				
					<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>34</td>
  </tr>
</table>

This will show up like this:

First Name	Last Name	Age
John	Doe	28
Jane	Smith	34

Table Attributes (border, cellpadding, cellspacing)

There are a few attributes you can use to adjust the spacing and look of your table.

Border Attribute

The border attribute adds a border around your table. It’s better to use CSS for this, but for quick styling, it works.

				
					<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>28</td>
  </tr>
</table>

This creates a table with borders around the cells.

Cellpadding and Cellspacing

cellpadding: Adds space inside each cell, between the content and the border.
cellspacing: Adds space between the cells themselves.

				
					<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>28</td>
  </tr>
</table>

Here, cellpadding="10" adds space inside the cells, and cellspacing="5" adds space between the cells.

Table Headers and Footers (, , )

For bigger tables, it helps to organize your content into sections using <thead>, <tbody>, and <tfoot>.

Basic Example:

				
					<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>34</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">End of Data</td>
    </tr>
  </tfoot>
</table>

Here’s how it works:

<thead>: Holds the table headers.
<tbody>: Holds the actual data rows.
<tfoot>: Holds any footer info, like summaries or notes.

Colspan and Rowspan Attributes

Need to merge cells? Use colspan to make a cell span across multiple columns, and rowspan to span across rows.

Colspan Example:

				
					<table border="1">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>28</td>
  </tr>
</table>

This merges two header cells into one:

Name		Age
John	Doe	28

Rowspan Example:

				
					<table border="1">
  <tr>
    <th>Name</th>
    <th rowspan="2">Age</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>34</td>
  </tr>
</table>

This merges the “Age” cell across two rows:

Name	Age
John	28
Jane	34

Styling Tables with CSS

You can style tables using CSS to make them look cleaner and more polished.

Basic Table Styling:

				
					<table class="styled-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

<style>
  .styled-table {
    border-collapse: collapse;
    width: 100%;
  }
  .styled-table th, .styled-table td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  .styled-table th {
    background-color: #f2f2f2;
    text-align: left;
  }
  .styled-table tr:hover {
    background-color: #f1f1f1;
  }
</style>

border-collapse: Merges the borders into one.
Padding: Adds space inside the cells.
Hover effect: Highlights a row when you hover over it.

Zebra Striped Table:

Zebra striping alternates the row colors to make the table easier to read.

				
					<style>
  .styled-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .styled-table tr:nth-child(odd) {
    background-color: #fff;
  }
</style>

This creates alternating row colors for better readability.

Summary

Tables in HTML are super handy for organizing data into rows and columns. The basic structure includes tags like <table>, <tr>, <th>, and <td>. You can use attributes like border, cellpadding, and cellspacing to adjust the table’s spacing and appearance. More advanced tags like <thead>, <tbody>, and <tfoot> help with larger tables, and colspan and rowspan allow you to merge cells. Finally, with CSS, you can make your tables look polished with features like hover effects and zebra stripes.

Contents

Tables

Basic Table Structure ( < table >, < tr >, < th >, < td >)

Basic Example:

Table Attributes (border, cellpadding, cellspacing)

Border Attribute

Cellpadding and Cellspacing

Table Headers and Footers (, , )

Basic Example:

Colspan and Rowspan Attributes

Colspan Example:

Rowspan Example:

Styling Tables with CSS

Basic Table Styling:

Zebra Striped Table:

Summary

Related Chapters

CATEGORY

ABOUT US

GET IN TOUCH

FOLLOW US