Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

HTML Table

HTML Tables

A simple HTML table:

Here is an example of a simple HTML table with two rows and three columns:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

HTML Table: In this example, the<table>element is used to create a table. The first row is created with the<tr>(table row) element, and the column headers are created with the<th>(table header) element. The second and third rows are created with the<tr>element, and the data cells are created with the<td>(table data) element.

Thethelement is used to create a header cell for each column, while thetdelement is used to create a data cell for each row and column. The table is displayed with a border by default, but this can be removed using CSS.

 

Table Cells

Table cells are the individual rectangular areas within a table that contain data or other content. In HTML, table cells are created with the<td>(table data) element. Table cells can contain text, images, links, or other HTML elements.

Table cells are usually grouped together into rows using the<tr>(table row) element. A table row is a horizontal grouping of table cells that are aligned with one another vertically.

Table cells can also be used for header information using the<th>(table header) element. The main difference between the<td>and<th>elements is that the latter is used for header cells, which are typically displayed in bold and centered by default.

Here is an example of a simple HTML table with two rows and three columns:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

HTML Table: In this example, the<td>element is used to create a data cell for each row and column, while the<th>element is used to create a header cell for each column.

 

Table Rows

In HTML, a table row is a horizontal grouping of table cells (<td>or<th>elements) that are aligned with one another vertically. Table rows are created with the<tr>(table row) element.

Here is an example of a simple HTML table with two rows and three columns:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

In this example, there are three rows, each with three columns. The first row contains the column headers (<th>elements), while the second and third rows contain the data cells (<td>elements).

Table rows can be styled with CSS to change their appearance. For example, you can change the background color of a table row by targeting thetrelement in your CSS code:

tr {
  background-color: #f2f2f2;
}

This will set the background color of all table rows to a light gray color (#f2f2f2).

Table Headers

In HTML, a table header is a special type of table cell (<td>element) that is used to represent the header information for a column or row. Table headers are usually displayed in bold and centered by default, and are created with the<th>(table header) element.

Here is an example of a simple HTML table with two rows and three columns, where the first row contains the column headers created with<th>elements:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

HTML Table: In this example, the first row contains the column headers, which are created with the<th>element. The second and third rows contain the data cells, which are created with the<td>element.

Table headers can also be used to represent header information for a row, by placing<th>elements in the first column of each row:

<table>
  <tr>
    <th>Header 1</th>
    <td>Data 1, Column 1</td>
    <td>Data 1, Column 2</td>
  </tr>
  <tr>
    <th>Header 2</th>
    <td>Data 2, Column 1</td>
    <td>Data 2, Column 2</td>
  </tr>
  <tr>
    <th>Header 3</th>
    <td>Data 3, Column 1</td>
    <td>Data 3, Column 2</td>
  </tr>
</table>

HTML Table: In this example, the first column of each row contains the row headers, which are created with the<th>element. The remaining columns contain the data cells, which are created with the<td>element.

Scroll to Top