Web Page Design Course in 5 days Lesson – 5

5.1 Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example 5.1:

5.2 Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example 5.2:

A simple HTML table:

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

5.3 HTML Table – Add a Border

To add a border to a table, use the CSS border property:

Example 5.3:

Example 5.4:

Table With Border

Use the CSS border property to add a border to the table.

Remember to define borders for both the table and the table cells.

5.4 HTML Table – Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example 5.5:

CSS

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

5.5 HTML Table -Add Cell Padding

1. Cell padding specifies the space between the cell content and its borders.
2. If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example 5.6:

CSS

Cellpadding

Cell padding specifies the space between the cell content and its borders.

5.6 HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example 5.7:

CSS

Left-align Headings

To left-align the table headings, use the CSS text-align property.

 

5.7 HTML Table – Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example 5.8:

CSS

Note: If the table has collapsed borders, border-spacing has no effect.

5.8 HTML Table – Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

Example 5.9:

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute

5.9 HTML Table – Cell that Spans Many Columns

To make a cell span more than one row, use the rowspan attribute:

Example

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

HTML Table – Add a Caption

To add a caption to a table, use the <caption> tag:

Example

Table Caption

To add a caption to a table, use the caption tag.

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

Example

Now you can define a special style for this table:

Styling Tables

And add more styles:

Styling Tables

Chapter Summary

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table