LabEx
Log In Join For Free

HTML Table Row

HTMLHTMLBeginner
Practice Now

Introduction

Tables can be used to present data in a structured format. The basic component of any table is a table row () element that defines a row of cells. Table rows must be enclosed within a table (

) element. In this lab, we will learn how to create HTML table rows.

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-70872{{"`HTML Table Row`"}} html/head_elems -.-> lab-70872{{"`HTML Table Row`"}} html/tables -.-> lab-70872{{"`HTML Table Row`"}} html/tbl_access -.-> lab-70872{{"`HTML Table Row`"}} end

Creating an HTML Table Structure

To create an HTML table, we first need to define the structure of the table. Start by creating an HTML file named index.html. Add the following code to your file:

<!doctype html>
<html>
  <head>
    <title>My Table</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Header Cell 1</th>
        <th>Header Cell 2</th>
      </tr>

      <tr>
        <td>Data Cell 1</td>
        <td>Data Cell 2</td>
      </tr>
    </table>
  </body>
</html>

In this code, we have created an HTML table with two rows and two columns. The first row contains two header cells (

elements to the table. For example, to add another row to the table, add the following code between the existing elements:

<tr>
  <td>Data Cell 3</td>
  <td>Data Cell 4</td>
</tr>

Now, the table has three rows, with each row containing two cells.

Styling the Table Rows

We can add styles to the table rows using CSS. Add the following style to the element to add a background color to the even rows:

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

This code will add lightgray background color to every second row in the table.

Merging Table Rows

We can merge two or more adjacent rows into a single row using the rowspan attribute. For example, let's say we want to merge the first two rows into a single row. Replace the first

element with the following code:

<tr>
  <th rowspan="2">Header Cell 1</th>
  <th>Header Cell 2</th>
</tr>

The rowspan="2" attribute in the first header cell will merge the first two rows into a single row.

Creating Table Cell Headers

We can use the

) and the second row contains two data cells ().

Adding More Rows

To add more rows to the table, we need to add more

element to create header cells in the table. Header cells are typically used to describe the content of the columns. To add a header cell to the first column, replace the first element in the second row with the following code:

<th scope="row">Data Cell 1</th>

The scope="row" attribute in the

element specifies that this is a header cell for the first row.

Summary

In this lab, we learned how to create HTML table rows and customize the table using CSS. We also learned how to merge adjacent rows and create header cells in the table. With these skills, you can now create beautiful and structured tables for your web pages.

Other HTML Tutorials you may like

Related HTML Courses
Quick Start with HTML

Quick Start with HTML

HTML
Beginner
HTML Practice Labs

HTML Practice Labs

HTML
Beginner
HTML Practice Challenges

HTML Practice Challenges

HTML
Beginner

We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy