HTML Tables

HTML <table> tag allow us to arrange data (text, images, links) in rows and columns.

Inside the <table> tag <tr> tag is used to create the row, <th> table header and <td> tag is used to create the data cells.

Example:

In the above example border is an attribute of <table> tag and it’s used to put border across the cells. To avoid the border you can use border=”0″.

Output:

Cellpadding and Cellspacing Attributes

Cellpadding and Cellspacing are two attributes of table, used to adjust the white space in table cells. Cellspacing attribute is used defines the width of the border, while cellpadding defines the distance between cell borders and the content within a cell.

Syntax:

Example:

Output:

Colspan and Rowspan Attributes

Colspan attribute is used to merge two or more columns into a single column and rowspan is used to merge two or more rows.

Syntax:

Example:

Output:

Table Height and Width

Height and Width is used in table tag to set the table height and width. It can be in terms of pixels or percentage.

Syntax:

Example:

Output:

Table align and valing

In all the above examples, you can see that table heading is aligned to center and table data is aligned to the left, these are the some default settings of html table tag. If you want to align it differently, then you can use align and valign attribute of table’s td Or th.

Align values can be left, center or right, on the other hand valign is used to vertical alignment of table’s cell or td, valign value can be top, center or bottom.

Syntax:

Example:

Output:

Nested Tables

We can use one table inside another table to design our web page. Below is the example of such kind of nested table:

Output: