HTML Tables

Tables in HTML are used to represent data in a grid of rows and columns.

Tables are created using the <table> element, and each row is represented using the <tr> element (stands for "table row"). The individual cells of the table are represented using the <td> element (stands for "table data").

Here is an example of a simple HTML table:

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

This will render as:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Table Headers

You can also use the <th> element (stands for "table header") to represent cells that contain header information, as opposed to regular data. These cells are typically rendered in a bold font and centered within the cell. Here is an example of how you can use the <th> element:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

This will render as:

Header 1 Header 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

You can also use various attributes of the <table> element, such as border, cellpadding, and cellspacing, to control the appearance of the table.

HTML Table Attributes

Here are some of the attributes that you can use with the <table> element in HTML:

border:

This attribute specifies the width (in pixels) of the border around the table. For example, <table border="1"> will create a table with a 1-pixel border.

cellpadding:

This attribute specifies the amount of space (in pixels) between the content of a cell and its border. For example, <table cellpadding="5"> will create a table with 5 pixels of padding around the content of each cell.

cellspacing:

This attribute specifies the amount of space (in pixels) between the cells of the table. For example, <table cellspacing="5"> will create a table with 5 pixels of space between the cells.

width:

This attribute specifies the width of the table. You can specify the width in pixels (e.g., <table width="500">) or as a percentage of the available space (e.g., <table width="50%">).

height:

This attribute specifies the height of the table. You can specify the height in pixels (e.g., <table height="500">) or as a percentage of the available space (e.g., <table height="50%">).

Here is an example of how you can use these attributes to control the appearance of a table:

<table border="1" cellpadding="5" cellspacing="0" width="50%">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

This will render as:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

As you can see, this HTML code created a table with a 1-pixel border, 5 pixels of padding around the content of each cell, no space between the cells, and a width of 50% of the available space.

HTML Basics