HTML Table Data Cell: Mastering the TD Tag

Introduction

In this lab, you will learn about the HTML <td> tag which is used to define table data in an HTML table. You will also learn about the various attributes that can be used with this tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70856{{"`HTML Table Data Cell`"}} html/head_elems -.-> lab-70856{{"`HTML Table Data Cell`"}} html/tables -.-> lab-70856{{"`HTML Table Data Cell`"}} html/tbl_access -.-> lab-70856{{"`HTML Table Data Cell`"}} end

Creating an HTML Table

The first step is to create an HTML table with some data. Open the index.html file and add the following code:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Here, we have created an HTML table with two rows and three columns. The <td> tag is used to define the content of each cell in the table.

Using the Colspan Attribute

The colspan attribute is used to specify how many columns a cell should span. To use the colspan attribute, add the following code:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Here, we have used the colspan attribute to span the first two columns to display the name of the person in a single cell.

Using the Rowspan Attribute

The rowspan attribute is used to specify how many rows a cell should span. To use the rowspan attribute, add the following code:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

Here, we have used the rowspan attribute to span the first name column to display the name of the person in a single cell for two rows.

The header attribute is used to specify that a cell relates to one or more header cells. To use the header attribute, add the following code:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Here, we have used the header attribute to specify that the first column relates to the header cell with the ID name-header.

Summary

Congratulations! You have learned how to use the HTML <td> tag to define table data in an HTML table. You also learned about the various attributes such as colspan, rowspan, and header that can be used with this tag to create more complex tables.

HTML Table Data Cell