HTML Tables:

---

HTML Tables:

As we know that a table is nothing but a grid of some rows and some columns. Rows are the horizontal divisions whereas columns are the vertical divisions. However in HTML, a table is created in a different way. We don’t create separate columns. Instead, we create rows and then a set of cells in every row.

In HTML, following four fundamental tags are used for creating a table.

1. The <table> tag:
2. The <tr> tag:
3. The <th> tag:
4. The <td> tag:

Syntax:

---

Here in this syntactical diagram, you can see that four <tr> tags are coded within one <table> tag.

Every <tr> . . . </tr> creates a row in side of which every <th> . . . </th> or every <td> . . . </td> creates a cell.

We have used an attribute border with <table> tag that creates a border of width 1 pixel. We can change the values to get more thick borders.

---

Attributes of <table> tag:

The tag <table> has many attributes in HTML, out of which we are discussing some of the most popular ones-

• border: to create a border of defined pixel width.
  <table border="1"> ------- ------- </table>


• bgcolor: to provide a background color for the entire table.
  <table bgcolor="pink"> ------- ------- </table>


• width: to set a width of defined pixel for the entire table.
  <table width="400"> ------- ------- </table>


• height: to set a height of defined pixel for the entire table.
  <table height="300"> ------- ------- </table>


• align: to align the table horizontally on the screen. It can be left or center or right.
  <table align="center"> ------- ------- </table>

---

Attributes of <tr> tag:

The tag <tr> creates a row in the table. It has following attributes-

• bgcolor: to provide a background color for the entire row.
  <tr bgcolor="pink"> ------- ------- </tr>


• height: to set a height of defined pixel for the entire row.
  <tr height="300"> ------- ------- </tr>


• align: to align the contents of entire row at once. It can be left or center or right.
  <tr align="center"> ------- ------- </tr>

---

Attributes of <th> or <td> tags:

The tags <th> or <td> create a cell in the table. These tags have following attributes-

• bgcolor: to provide a background color for the cell.
  <td bgcolor="pink"> ------- </td>


• align: to align the contents of the cell. It can be left or center or right.
  <td align="center"> ------- </td>


• colspan: to give span to the cell towards the next columns.
  <td colspan="2"> ------- </td>


• rowspan: to give span to the cell towards the lower rows.
  <td rowspan="2"> ------- </td>