Tables

Tables in HTML helps you represent data in two dimensions.

Table and Related Elements

Tables in HTML are created using the <table> element, which organizes data into rows and columns. The basic structure of a table consists of the following elements:

Table element<table> is a container element that holds the entire table structure.

Table head element <thead> is a container for header rows <tr> that should appear at the top of the table

Table body element<tbody> is a container for the main data rows of the table

Table footer element <tfoot> container for footer rows that typically contain summary information

Table row element <tr> helps defines a row within the table. It can contain a combination of <th> and <td> elements, depending on whether the row is a header row or a data row.

Table head element <th> help to define header cell within the table. These cells are often styled differently (bold and centered by default) and represent the column headers.

Table data element <td> defines a standard data cell within the table. These cells align under the corresponding headers.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Above snippet gets rendered like this

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Lets look at how it works: The <table> tag wraps around the entire table. The first <tr> tag contains <th> elements, which are used to define the table headers. Subsequent <tr> tags contain <td> elements, which are used to define the table’s data cells.

Table Attributes

These attributes helps tables to be customized, defining how the table and its cells should appear or behave.

border

The border attribute is used to add borders around the table and its cells. Although it’s more common now to use CSS for styling, the border attribute can be used directly in the HTML for simplicity.

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

The border="1" attribute creates a border around the table and its cells.

colspan

The colspan attribute allows a cell to span across multiple columns. This is useful when you want to create a header or footer that stretches across the entire table or a portion of it.

<table border="1">
  <thead>
    <tr>
      <th colspan="3">Product Information</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product</td>
      <td>Price</td>
      <td>Quantity</td>
    </tr>
  </tbody>
</table>

above snippet gets rendered like this

Product Information
Product	Price	Quantity

<th colspan="3"> in the first row spans across three columns, creating a single header that reads “Product Information” above the rest of the table.

rowspan

The rowspan attribute allows a cell to span across multiple rows. This is useful when you want a particular cell to take up space in more than one row.

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Apple</td>
      <td>Price: $1.00</td>
    </tr>
    <tr>
      <td>Quantity: 50</td>
    </tr>
  </tbody>
</table>

above snippet gets rendered like this

Product	Details
Apple	Price: $1.00
	Quantity: 50

The <td rowspan="2"> in the first column spans across two rows, so “Apple” appears as the product name for both the price and quantity details.

Proper knowledge about tables helps you with representing large amounts in a structured way.