tutorialstonight logo
A Platform To Learn To Code

HTML TABLE



For better presentation of data sometimes we need to create tables.

For that we need to arrange our data values in form of row and column.In HTML we can do this using the <table> tag followed by other tags like: <tr> tag, <th> tag and <td> tag.

Lets see an example:

Example:

Name Age Hobby
Jack 21 Learning
Jenny 25 Exploration
John 20 Entertainment
Jerry 5 Playing

Example

Run the code

Explanation:

  • table tag - It is the primary tag for creating table.All other tags like:<tr>, <th> and <td> comes inside this tag.
  • tr tag - It is used to create table rows.Table heading (th tag) and table data (td tag) comes under this tag.
  • th tag - It gives table heading for all columns which has higher font weight.
  • td tag - It defines a specific block inside which we can insert valuable data,images,other tables etc.

Note: - Inside <tr> tag we can insert any HTML element including data,text,list,image,other table etc.



HTML Table - Border

For creating borders around the table's row and column either we need to use the border attribute in <table> tag(as we did in above example) or we can create border using CSS.

Here is an example of creating border using:

Example

Run the code

HTML Table - Border collapse

As we can see in above both examples borders are not collapsed.To create a collapsed border table we need to use CSS property border-collapse:collapse.

Example

Run the code

HTML Table - cell spanning multiple rows or column

Generally cells of a table span only one row and one column but we can increase their spanning to multiple rows or columns.

For spanning multiple rows or columns we can use the attribute rowspan for multiple row span and colspan for multiple column span.

As we can see in the example below:

Example

Run the code

HTML Table - Caption

We can add caption to any table.Caption provides basic information about the table.

For creating a caption to the table <caption> tag is used.This tag must be immediately used after the table tag.

Example

Run the code