Skip to main content

Creating Tables

In HTML, tables are used to organize and present data in a structured manner. HTML tables are created using a combination of different tags which include <table>, <tr>, <td>, and <th>. Below is a step-by-step guide on how to create tables in HTML.

What is an HTML Table?​

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Simple Table Structure​

To create a simple HTML table, you need to use the <table>, <tr> (table row), and <td> (table data) tags. Here's a simple example:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

In this example, we have a table with two rows and two columns.

Adding Table Headers​

To create headers for your table columns, you can use the <th> tag:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

In this table, the first row is now a header row, which is usually used to label the columns.

Adding Borders to Tables​

HTML tables generally don't have borders. To add borders to your table, you need to use CSS styles:

<table style="border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black;">Header 1</th>
    <th style="border: 1px solid black;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Row 1, Cell 1</td>
    <td style="border: 1px solid black;">Row 1, Cell 2</td>
  </tr>
</table>

This will produce a table with a border around each cell.

Spanning Rows and Columns​

At times, you may want a cell to span more than one column or row. To achieve this, you can use the colspan and rowspan attributes:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">This cell spans 2 rows</td>
    <td colspan="2">This cell spans 2 columns</td>
  </tr>
  <tr>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

In this example, the first cell in the second row spans two rows, and the second cell in the same row spans two columns.

Remember to practice as much as you can while learning HTML. Tables can be complex, but with practice, you should be able to create even the most complex tables. Happy coding!