tutorialstonight logo

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


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:


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.


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:


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.