HTML table tags

HTML table tags
Nikhil
Published on 2021-07-01 11:05:36

HTML table tags and examples of table tags

The HTML <table> element allows web authors to display tabular data (such as text, images, links, other tables, etc.) in a two-dimensional table with rows and columns of cells.

Simple Table Example


<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <tr>
      <th>Heading 1/Column 1</th>
      <th>Heading 2/Column 2</th>
    </tr>
    <tr>
      <td>Row 1 Data Column 1</td>
      <td>Row 1 Data Column 2</td>
    </tr>
    <tr>
      <td>Row 2 Data Column 1</td>
      <td>Row 2 Data Column 2</td>
    </tr>
  </table>
</body>
</html>

output:                                                              

Heading 1/Column 1 Heading 2/Column 2
Row 1 Data Column 1 Row 1 Data Column 2
Row 2 Data Column 1 Row 2 Data Column 2
 

This will render a <table> consisting of three total rows (<tr>): one row of header cells (<th>) and two rows of content cells (<td>). <th> elements are tabular headers and <td> elements are tabular data. You can put whatever you want inside a <td> or <th>.

 

HTML Table Spanning columns or rows


Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to <th> and <td> elements.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <tr>
      <td>row 1 col 1</td>
      <td>row 1 col 2</td>
      <td>row 1 col 3</td>
    </tr>
    <tr>
      <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
      <td rowspan="2">This cell spans two rows</td>
      <td>row 3 col 2</td>
      <td>row 3 col 3</td>
    </tr>
    <tr>
      <td>row 4 col 2</td>
      <td>row 4 col 3</td>
    </tr>
  </table>
</body>
</html>

 

output:                                                                                        

row 1 col 1 row 1 col 2 row 1 col 3
This second row spans all three columns
This cell spans two rows row 3 col 2 row 3 col 3
row 4 col 2 row 4 col 3

Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers. rowspan = A non-negative integer that specifies the number of rows spanned by a cell.

The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current row until the last row of the table (<thead>, <tbody>, or <tfoot>). colspan = A non-negative integer that specifies the number of columns spanned by the current cell.

The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current to the last column of the column group <colgroup> in which the cell is defined.

 

HTML Table Column Groups


Sometimes you may want to apply styling to a column or group of columns. Or for semantic purposes, you may want to group columns together. To do this, use <colgroup> and <col> elements.

The optional <colgroup> tag allows you to group columns together. <colgroup> elements must be child elements of a <table> and must come after any <caption> elements and before any table content (e.g., <tr>, <thead>, <tbody>, etc.).

<table>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
...
</table>

The optional <col> tag allows you to reference individual columns or a range of columns without applying a logical grouping. <col> elements are optional, but if present, they must be inside a <colgroup> element.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <colgroup>
      <col id="MySpecialColumn" />
      <col />
    </colgroup>
    <colgroup>
      <col class="CoolColumn" />
      <col class="NeatColumn" span="2" />
    </colgroup>
    ...
  </table>
</body>
</html>

                                            ...  

 

The following CSS styles can be applied to <colgroup> and <col> elements:

  • border
  • background
  • width
  • visibility
  • display (as in display: none)
  • display: none; will actually remove the columns from the display, causing the table to render as if
    those cells don't exist

Table with thead, tbody, tfoot, and caption


HTML also provides the tables with the <thead>, <tbody>, <tfoot>, and <caption> elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling. When printing out a table that doesn't fit onto one (paper) page, most browsers repeat the contents of <thead> on every page.

There's a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <caption>Table Title</caption>
    <!--| caption is the first child of table |-->
    <thead>
      <!--======================| thead is after caption |-->
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tbody>
      <!--======================| tbody is after thead |-->
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
    <tfoot>
      <!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->
      <!--| Regardless where tfoot is in markup, it is rendered at the bottom. |-->
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

 

The following example's results are demonstrated twice--the first table lacks any styles, the second table has a few CSS properties applied: background-color, color, and border*. The styles are provided as a visual guide and is not an essential aspect of the topic at hand.

HTML Table Heading scope


th elements are very commonly used to indicate headings for table rows and columns, like so:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td></td>
        <th>Column Heading 1</th>
        <th>Column Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Row Heading 1</th>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>Row Heading 2</th>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>
</html>


This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub table Example</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td></td>
        <th scope="col">Column Heading 1</th>
        <th scope="col">Column Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row Heading 1</th>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">Row Heading 1</th>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

the scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes

  • col
  • row
  • colgroup
  • rowgroup

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website