HTML - Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

Tables offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.

Why Tables are Used in HTML

Tables are employed in HTML for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include −

  • Structuring Data − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.

  • Comparative Presentation − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.

  • Tabular Data Representation − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables.

How to use Tables in HTML

Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>, <tr>, <td>, and <th>.

  • <table> − This tag marks the beginning and end of the entire table.

  • <tr> − Stands for "table row" and is used to define a row within the table.

  • <td> − Represents "table data" and is used to define standard cells within a row.

  • <th> − Represents "table header" and is used to define header cells within a row.

Example

Here's an example illustrating the basic structure of an HTML table −

<!DOCTYPE html>
<html>
<head>
   <style>
      table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
   }
   th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
   }
   th {
      background-color: #f2f2f2;
   }
   </style>
</head>
<body>
   <h2>Sample Table</h2>
   <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>
</body>
</html>

The Structure of Tables - Rows and Columns

  • Rows - Each row in an HTML table is defined using the `<tr>` tag. It contains a set of table cells (`<td>` or `<th>`), representing the individual elements within that row.

  • Columns - The actual data or header information is contained within the table cells. Cells in the same position in different rows form a column.

  • A table row is defined by the <tr> tag. To set table header, we use <th> tag. To insert data in table cell, use the <td> tag.

  • A table in HTML consists of table cells inside rows and columns of the table.

  • Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of the column of a table.

  • Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content of the table rows and columns.

  • Each table row starts with a <tr> ....</tr> tag.

  • We use style sheet to create border for the table.

Example

Consider a table representing a simple list of products with their respective categories and prices −

<!DOCTYPE html>
<html>
<body>
   <table border="1">
   <tr>
      <th>Product</th>
      <th>Category</th>
      <th>Price</th>
   </tr>
   <tr>
      <td>Laptop</td>
      <td>Electronics</td>
      <td>$800</td>
   </tr>
   <tr>
      <td>Bookshelf</td>
      <td>Furniture</td>
      <td>$150</td>
   </tr>
   <tr>
      <td>Coffee Maker</td>
      <td>Appliances</td>
      <td>$50</td>
   </tr>
   </table>
</body>
</html>

This basic table structure organizes data in a clear, tabular format, making it easy to read and understand.

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0".

Tables Backgrounds

You can set table background using one of the following two ways −

  • bgcolor attribute − You can set background color for whole table or just for one cell.

  • background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background</title>
</head>
<body>
   <table border="1" bordercolor="green" bgcolor="yellow">
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
         <th>Column 3</th>
      </tr>
      <tr>
         <td rowspan="2">Row 1 Cell 1</td>
         <td>Row 1 Cell 2</td>
         <td>Row 1 Cell 3</td>
      </tr>
      <tr>
         <td>Row 2 Cell 2</td>
         <td>Row 2 Cell 3</td>
      </tr>
      <tr>
         <td colspan="3">Row 3 Cell 1</td>
      </tr>
   </table>
</body>
</html>

Example

Here is another example of using background attribute. Here we will use an image available in /images directory.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background</title>
</head>
<body>
   <table border="1" bordercolor="green" background="/images/test.png">
   <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
   </tr>
   <tr>
      <td rowspan="2">Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
   </tr>
   <tr>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
   </tr>
   <tr>
      <td colspan="3">Row 3 Cell 1</td>
   </tr>
   </table>
</body>
</html>

Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
</head>
<body>
   <table border="1" width="400" height="150">
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
      </tr>
   </table>
</body>
</html>
Advertisements