HTML Table

Prev Next

The HTML <table> tag is used to display data in a tabular form, consisting of rows and columns. Tables are essential for organizing and presenting data in a structured manner. Each table is composed of multiple elements that define its structure:

Table Tags and Their Descriptions

    The border attribute is an old-school method of adding borders directly within the HTML tag. This method is straightforward but lacks the flexibility and control offered by CSS.
Tag Description
<table> Defines the table container.
<tr> Defines a row within the table.
<th> Defines a header cell within the table.
<td> Defines a standard data cell within the table.
<caption> Provides a caption or title for the table.
<colgroup> Specifies a group of one or more columns in a table for styling purposes.
<col> Specifies column properties within a <colgroup> for individual columns.
<tbody> Groups the body content in a table.
<thead> Groups the header content in a table.
<tfoot> Groups the footer content in a table.

HTML Table with Border

There are two ways to specify a border for HTML tables:

1. By using the border attribute in HTML.

2. By using the border property in CSS.

1. Using the border Attribute in HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Table with Border Attribute</title>
</head>
<body>
  <table border="1">
    <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>

Output:

Table with Border Attribute

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

In this example, the border="1" attribute adds a thin border around each cell in the table. The number "1" specifies the border width in pixels. This method is simple but has limitations in terms of customization.

2. Using the border Property in CSS

The border property in CSS provides much more flexibility and control over the appearance of table borders. You can define the style, width, and color of the borders, and you can also specify borders for individual cells, rows, or the entire table.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Table with Border Property in CSS</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    table, th, td {
      border: 1px solid black;
    }
    th, td {
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <h1>Table with Border Property in CSS</h1>
  <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>

Output:

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

HTML Table with cell padding

You can specify padding for table header and table data by two ways

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

1. Using the cellpadding Attribute (Obsolete Method)

This method involves adding the cellpadding attribute directly to the <table> tag. Note that this method is no longer recommended and may not be supported in future HTML standards.

Example:

<!DOCTYPE html>
<head>
  <title>Table with Cell Padding (Obsolete)</title>
</head>
<body>
  <table cellpadding="10" border="1">
    <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>

Output:

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

2. Using the padding Property in CSS (Recommended Method)

This method involves using CSS to set padding for table cells. It provides more flexibility and is the recommended approach.

Example:

<!DOCTYPE html>
<head>
  <title>Table with Cell Padding (CSS)</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid black;
    }
    th, td {
      border: 1px solid black;
      padding: 10px; /* Add padding to table cells */
      text-align: left;
    }
  </style>
</head>
<body>
  <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>

Output:

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

HTML Table with colspan

To extend a cell across multiple columns, you can utilize the colspan attribute. This attribute allows a cell to cover more than one column, with the extent of the span determined by the value assigned to colspan.

HTML Table with rowspan

To stretch a cell across several rows, you can use the rowspan attribute. This attribute makes it possible for a cell to span multiple rows, and the number of rows spanned is specified by the value given to rowspan.

Example:

<!DOCTYPE html>
<head>
  <title>Table with colspan and rowspan</title>
</head>
<body>
  <table border=1>
    <tr>
      <th>Header 1</th>
      <th colspan="2">Header 2 & 3</th>
    </tr>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td colspan="3">Cell with Colspan</td>
    </tr>
  </table>
</body>
</html>

Output:

    
Header 1 Header 2 & 3
Cell with Rowspan Data 1 Data 2
Data 3 Data 4
Cell with Colspan
Prev Next