HTML Table Row: Mastering Table Structures

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 (

) 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 HTML Table Column Grouping HTML Table Definition HTML Table Data Cell HTML Table Footer Creating a Minesweeper Game with JavaScript Counting Access Times by IP Wish Sticky Note App with Vue.js Vanished Into Thin Air Data Formatting and Visualization with Vue.js A Good Review for the Takeout topics Linux DevOps Cybersecurity Python Docker Kubernetes Git Shell Java MySQL MongoDB Golang Ansible Jenkins C C++Machine Learning Data Science Pandas NumPy scikit-learn Matplotlib Web Development CSS JavaScript React share Related HTML Courses Quick Start with HTML HTML Beginner Build a Tic-Tac-Toe Web App HTMLCSSJavaScript Beginner Creating a Whack-a-Mole Web Game HTMLCSSJavaScript 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 Learn Linux, DevOps & Cybersecurity with Hands-on Labs LEARNING PATH Learn Linux Learn Python Learn Docker Learn MySQL Learn Java Learn Jenkins Learn Machine Learning Cybersecurity Learning Path DevOps Learning Path scikit-learn Learning Path PROJECTS & TUTORIALS All Interactive Tutorials Linux Projects Python Projects Java Projects Numpy Projects Linux Tutorial Docker Tutorial C++ Tutorial Ansible Tutorial Linux Commands Cheat Sheet PLAYGROUNDS Online Linux Terminal Online Docker Playground Online Python Playground Online Golang Playground Online C++ Playground Online Java Playground Online Rust Playground Online MySQL Playground Online Ansible Playground Online Jenkins Playground LATEST TUTORIALS Claude Computer Use Demo kubectl port-forward in Kubernetes systemctl daemon-reload in Linux Match Patterns with Bash Regex Limit Depth of du Command Find Key with Max Value in Python Dictionary numpy.reshape in Python Check if a String is an Integer in Java Area and Circumference of a Circle in C Convert Enum to String in Java SUPPORT\|CONTACT US\|FORUM\|LABEX TEAMS\|AFFILIATE \|SITEMAP\|PRIVACY POLICY\|TERMS OF SERVICE © 2017-2024 LabEx Technology Limited All Rights Reserved

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.

HTML Table Row