HTML

HTML Tables

We can display data in structured rows and columns set with HTML tables. Each table is created using the <table> element and can include headers, rows, and cells.

Here is a simple example of the basic structure of an HTML table.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <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>
</table>

Table Headers

The header is created using <th> element. It explains the data of each column. Header cells are centered and bold by default.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>New York</td>
  </tr>
</table>

Table Borders 

We can add borders to the table to make it more readable. It can be done using the border attribute or CSS.

Following is an example of table borders using HTML attributes.

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>$1</td>
  </tr>
</table>

Below is an example of table borders using CSS.

<style>
  table, th, td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>$1</td>
  </tr>
</table>

Table Spacing and Padding

Spacing: controls the space between table cells. Spacing is applied using the cellspacing attribute HTML. This attribute maintains the space between the edges of adjacent cells.

Padding: maintains the distance between the content and border of a cell. It is applied using the cellpadding attribute in HTML. This attribute adds space between the cell’s content and its border.

<table border="1" cellspacing="10" cellpadding="15">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Table Size

Table size defines the dimensions of a table. We can set the table’s width and height using width and height attributes in HTML.

Width: specifies the width of the table. It can be set in pixels or as a percentage of the parent element.

Height: defines the height of the table. It can be set in pixels or as a percentage of the parent element.

<table border="1" width="80%" height="200">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Spanning Columns and Rows

To merge table cells across rows and columns we use the rowspan and colspan attributes.

Following is the example of column span.

<table border="1">
  <tr>
    <th colspan="2">Personal Information</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>John</td>
  </tr>
</table>

Following is the example of row span.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <td>John</td>
  </tr>
  <tr>
    <td>Doe</td>
  </tr>
</table>

Table Colgroup

The <colgroup> element groups one or more <col> elements, allowing to apply style to entire column cells rather than individual cells. It is for defining the width, background color, or other styling.

The <colgroup> element should be a child of the <table> element and used with the <col> element to define properties for the columns in a table.

<table>
  <colgroup>
    <col span="2" style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

To organize and display data, HTML tables are a perfect tool. By understanding the basic structure and how to style and span cells, anyone can create clean, professional tables for any purpose.

Prev
Next
Scroll to Top