Skip to main content

Archive

Show more

HTML Table Rows

by Rustcode

HTML Table Rows

  • The HTML <tr> element represents a row of cells in a table.
  • It is used to group the cells together horizontally within the table.
  • The <tr> element is placed within the <table> element.
  • Let's explore the various scenarios and examples of using table rows in HTML.

1. Basic Table Row:

The simplest use of <tr> is to contain the cells of a single row:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

2. Multiple Rows:

You can have multiple rows within the table:

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

3. Row Span:

You can span a cell across multiple rows using the rowspan attribute:

<table>
  <tr>
    <td rowspan="2">Spanned Cell</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
</table>

4. Column Span:

You can span a cell across multiple columns using the colspan attribute:

<table>
  <tr>
    <td colspan="2">Spanned Cell</td>
  </tr>
</table>

5. Styling the Rows:

You can apply CSS styles to the table rows to customize their appearance:

tr {
  background-color: #f2f2f2;
}

6. Use Cases:

  • Table rows are essential for organizing and structuring tabular data in a web page.
  • They're commonly used in data tables, schedules, and comparison charts to represent individual records or entries.
  • Row spans and column spans can be used to create complex layouts and merge cells for better data presentation.
  • They facilitate data interpretation and understanding, making the table content more accessible and user-friendly.

Conclusion:

The HTML <tr> element is a fundamental part of creating structured and organized tables in web development. By utilizing its features and examples, you can effectively design tables that convey information clearly and effectively.

Experiment with different row structures, span attributes, and styling options to tailor your tables to your specific needs. With practice, you'll become proficient in leveraging table rows to create well-structured and user-friendly tabular data.