HTML TableHTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using
|
It defines a row in a table. | |||||||||
It defines a header cell in a table. | ||||||||||
It defines a cell in a table. | ||||||||||
It defines the table caption. | ||||||||||
It specifies a group of one or more columns in a table for formatting. | ||||||||||
It is used with |
||||||||||
It is used to group the body content in a table. | ||||||||||
It is used to group the header content in a table. | ||||||||||
It is used to group the footer content in a table. |
Let's see the example of HTML table tag. It output is shown above.
Output:
First_Name | Last_Name | Marks |
---|---|---|
Sonoo | Jaiswal | 60 |
James | William | 80 |
Swati | Sironi | 82 |
Chetna | Singh | 72 |
In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.
There are two ways to specify border for HTML tables.
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.
Output:
First_Name | Last_Name | Marks |
---|---|---|
Sonoo | Jaiswal | 60 |
James | William | 80 |
Swati | Sironi | 82 |
Chetna | Singh | 72 |
It is now recommended to use border property of CSS to specify border in table.
You can collapse all the borders in one border by border-collapse property. It will collapse the border into one.
Output:
Name | Last Name | Marks |
---|---|---|
Sonoo | Jaiswal | 60 |
James | William | 80 |
Swati | Sironi | 82 |
Chetna | Singh | 72 |
You can specify padding for table header and table data by two ways:
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let's see the code of CSS.
Output:
Name | Last Name | Marks |
---|---|---|
Sonoo | Jaiswal | 60 |
James | William | 80 |
Swati | Sironi | 82 |
Chetna | Singh | 72 |
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.
We can adjust our table width as per our requirement. Following is the example to display table with width.
Output:
If you want to make a cell span more than one column, you can use the colspan attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.
Let's see the example that span two columns.
CSS code:
HTML code:
Output:
Name | Mobile No. | |
---|---|---|
Ajeet Maurya | 7503520801 | 9555879135 |
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.
Let's see the example that span two rows.
CSS code:
HTML code:
Output:
Name | Ajeet Maurya |
---|---|
Mobile No. | 7503520801 |
9555879135 |
HTML caption is diplayed above the table. It must be used after table tag only.
CSS code:
Output:
Element | Chrome | IE | Firefox | Opera | Safari |
Yes | Yes | Yes | Yes | Yes |