Creating and Styling HTML Table Rows with the `` Element

Master the creation and styling of table rows in HTML using the `` element. This tutorial explains its role in structuring tables, demonstrates how to create rows with data cells (``) and header cells (``), and shows how to use CSS for enhanced visual presentation of your tables.

Creating and Styling Table Rows with the HTML `` Element

Understanding Table Rows

The HTML `` (table row) element is fundamental to creating tables. It defines a single row within an HTML table. Each row contains one or more table cells (`` for data cells or `` for header cells). The `` element is always nested inside the `

` tag and acts as a container for table cells within a row. It's crucial for structuring table data logically and creating well-organized tables.

Basic Table Row Structure

Here’s a basic example showing how to create table rows:

Example Table Row

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Each `

` element defines a row, and each ``

The `

` element is supported by all major modern browsers.

` element represents a cell containing data. Ensure that each row has the same number of cells for consistent table structure.

Styling Table Rows with CSS

You can use CSS (Cascading Style Sheets) to customize the appearance of table rows. This improves the presentation and readability of your tables. For example, you can add background colors, change text alignment, or modify padding and borders:

Example: Styling Table Rows with CSS

tr {
  background-color: #f2f2f2; /* Light gray background */
  padding: 10px;             /* Add padding around text */
  border-bottom: 1px solid #ddd; /* Add a bottom border */
}

Browser Support for `

Browser Support
Chrome Yes
Edge Yes
Firefox Yes
Opera Yes
Safari Yes

Additional Table Features

Beyond basic rows, tables support many features that enhance their functionality and presentation: