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:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

 

Share on:

Hello, I am Dharmendra Yadav and I am a Python Developer with experience in web development using Django, Flask, REST API, SQL, MySQL, HTML, CSS, JavaScript, WordPress, Oracle Cloud, AWS and Git. I also write technical articles where I explain web development and Software Engineering. Facebook , Linkedin

Leave a Comment