CSS Tables

We have alreay learned HTML Tables that is very basic there we learned how to create HTML table and how to make rows cols in HTML Table.

To Make a beautiful HTML table we apply CSS on HTML Table.

CSS has the following properties for styling the HTML Tables:

  • border
  • border-collapse
  • width
  • height
  • text-align
  • vertical-align
  • padding
  • :hover
  • background-color (rows and headers)
  • overflow

border

The border can be set for <table>, <th> (table header) and <tr> (table tow). It can be set together by using grouping selectors or even individually as per requirements.

Run

border-collapse

By using just the border property for all table, th and tr, you might get double borders which may or may not be desirable.

Run

The border-collapse property tells whether these multiple borders should collapse into one. The value collapse is given to this property in case we need single border around the table elements.

Table width and height

The width and height properties can be used for this purpose. The values can be specific like in pixels or relative like percentage.

Run

text-align

The default text alignment for <th> content is center and that for the <td> content is left. For other alignments we can use the text-align property for both <th> and <td>.

vertical-align

The default vertical alignment for both <th> and <td> content is middle. To change it to top or bottom, we can use the vertical-align property.

padding

The padding property can be used to provide space between border and content of <td> and <th>. Additionally, you can use the border-bottom property to give horizontal lines separating the rows.

:hover

To provide effects on mouse hover, this property can be used. You this property is used with the desired elements like tr:hover or th:hover. You can then use it to highlight the table elements.

nth-child()

The nth-child() selector can be used to give striped rows for the table. The values even or odd are passed to highlight the even or odd rows accordingly.

background-color

The property can be used to control the background colors. It can be directly used like for other elements or it can be used with nth-child() or hover, to provide background colors for specific rows or in specific condition.

overflow-x

This property makes the table responsive in case its horizontal size gets larger than the browser or the containing element. If you set overflow-x as auto, a scroll-bar will be added every time the size overflows.

HTML Table rowspan and colspan

To span a row more than a single row we can use rowspan attribute.

Example:

Group 1 Manish Durg India 
Manoj Bhopal India 

Group 2 Rohit Banglore India 
Nitesh Bhopal India  

Output:

Group 1ManishDurg India
ManojBhopal India
Group 2RohitBanglore India
NiteshBhopal India

To span a column more than a single column we can use colspan attribute.
Example:

Output:

Group 1
ManishDurg India
ManojBhopal India
Group 2
RohitBanglore India
NiteshBhopal India

HTML table tag

We can create a table in html by using <htmt></htmt> tag.
with in table tag we use <tr> to create new table row.
inside tr we use <td> tag to specify data value.
to provide table header <th> tag is used

One table can contain multiple table rows and each row can contain multiple table data.

Syntax

<th> is optional it is used to provide HTML Table with Header

Example

Sr NoNameCity
1ManishBhilai
1MohanBhopal
1RamBanglore

For providing data heading we use <th> tag

HTML Table with border

In above table we have not provided table border to provide HTML table with border we can use border attribute with border tag as below

table border=" 1|0"

0 specify no border around the table
1 specify border around the table

HTML Border attribute in not support by HTML 5.

Insted of border attribute use CSS.

User NameMailid
Ram[email protected]
Mohan[email protected]
Shyam[email protected]

HTML Table border with CSS

HTML Table With Caption

To provide table caption <caption> tag is used is should be used below the <table> tag

User Name and Mailid details of user
User NameMailid
Ram[email protected]
Mohan[email protected]
Shyam[email protected]

HTML Table Grouping Tag

<thead>, <tbody> and <tfooter> tags are used for grouping table rows <thead> is used to group table header


<tbody> is used to group table body
<tfooter is used to group table footer

Q Which tag allows you to add a row in a table?

tr rag allows us to add a row in a table

Q Can a data cell contain images in html

yes We can include images in HTML data cell

Q what is the use of “border ” attribute of table tag?

“border ” attribute of table tag is used to set table border