HTML table

HTML table are an important part of creating structured and organized content on a web page. Tables are useful for displaying a large amount of data in a readable and easily understandable format. In this article, we will explore the basics of HTML tables, including how to create them and customize them.

Creating an HTML Table

To create an HTML table, we start with the <table> tag. The <table> tag is the container element that holds all the other table elements. Each row of the table is defined using the <tr> (table row) tag, and each column is defined using the <td> (table data) tag. Here is an example of a simple HTML table with two rows and two columns:

1<table>
2  <tr>
3    <td>Row 1, Column 1</td>
4    <td>Row 1, Column 2</td>
5  </tr>
6  <tr>
7    <td>Row 2, Column 1</td>
8    <td>Row 2, Column 2</td>
9  </tr>
10</table>

The above code will produce a table with two rows and two columns. The text "Row 1, Column 1" will appear in the top-left cell, "Row 1, Column 2" will appear in the top-right cell, "Row 2, Column 1" will appear in the bottom-left cell, and "Row 2, Column 2" will appear in the bottom-right cell.

Customizing an HTML Table

There are many ways to customize an HTML table, such as changing the border, background color, font, alignment, and spacing. Here are some common table attributes that can be used to customize the table:

  • border: Sets the width of the table border. The value can be a number, representing the number of pixels, or "0" to remove the border.
  • bgcolor: Sets the background color of the table. The value can be a color name, hex code, or RGB value.
  • cellpadding: Sets the padding (space) between the cell content and the cell border. The value can be a number, representing the number of pixels.
  • cellspacing: Sets the spacing between the cells. The value can be a number, representing the number of pixels.
  • align: Sets the horizontal alignment of the table. The value can be "left", "center", or "right".
  • valign: Sets the vertical alignment of the table. The value can be "top", "middle", or "bottom".

Here is an example of an HTML table with customized attributes:

1<table border="1" bgcolor="#f2f2f2" cellpadding="10" cellspacing="0" align="center" valign="middle">
2  <tr>
3    <td>Row 1, Column 1</td>
4    <td>Row 1, Column 2</td>
5  </tr>
6  <tr>
7    <td>Row 2, Column 1</td>
8    <td>Row 2, Column 2</td>
9  </tr>
10</table>

The above code will produce a table with a 1-pixel-wide border, a light gray background, 10 pixels of padding between the cell content and the cell border, no spacing between the cells, horizontally centered, and vertically middle-aligned.