LabEx
Log InJoin Free

HTML Table Row

HTMLBeginner
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.

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.

Related HTML Courses
HTML for Beginners

HTML for Beginners

htmlweb-development
Build a Tic-Tac-Toe Web App

Build a Tic-Tac-Toe Web App

javascriptweb-development
Creating a Whack-a-Mole Web Game

Creating a Whack-a-Mole Web Game

javascriptweb-development