CSS
In this tutorial we will learn about CSS Table styling property.
We use the border property to style the border of the table.
border
In the following example we have set the border to 1px.
table { border : 1px solid #333; }
Note! th and td have their own border so, we have to set their border separately.
th
td
In the following example we have set the border of the table, th and td.
table
table, th, td { border : 1px solid #333; }
We use the border-collapse property to collapse the border into one single border.
border-collapse
In the following example we have set the border-collapse property to collapse.
collapse
table { border-collapse : collapse; } table, th, td { border : 1px solid #333; }
We use the padding property to set the padding of the th and td.
padding
In the following example we have set the padding of the th and td to 15px;
table, th, td { border : 1px solid #333; } th, td { padding : 15px; }
We use the width property to set the width of the table.
width
For fixed width we set the width of the table to a fixed value. For variable width we use percentage.
In the following example we have set the width of the table to 250px.
table { width : 250px; } table, th, td { border : 1px solid #333; }
In the following example we have set the width of the table to 100%.
table { width : 100%; } table, th, td { border : 1px solid #333; }
We use the height property to set the height of the table.
height
In the following example we have set the height of th and td to 50px.
table, th, td { border : 1px solid #333; } th, td { height : 50px; }
We use the text-align property to align the content of the th and td to left, center and right.
text-align
left
center
right
In the following example we have set the text-align of th to center and text-align of td to left.
table { width : 40%; } table, th, td { border : 1px solid #333; } th { text-align : center; } td { text-align : left; }
We use the vertical-align property to align the content of th and td to top, middle and bottom align.
vertical-align
top
middle
bottom
In the following example we have set the vertical-align of the th to middle and td to bottom.
table { width : 40%; } table, th, td { border : 1px solid #333; } th { vertical-align : middle; height : 50px; } td { vertical-align : bottom; height : 50px; }
We can create striped table using the :nth-child() selector.
:nth-child()
In the following example we have set the background-color of header row to lightyellow and all the rows at even place (2nd, 4th, ...) to lightblue.
lightyellow
lightblue
table { width : 100%; } table, th, td { border : 1px solid #333; } tr:nth-child(1) { background-color : lightyellow; } tr:nth-child(even) { background-color : lightblue; }
We can use the :hover to make a table row highlighted when mouse hovers on top of it.
:hover
In the following example the background-color of the table row will turn lightyellow when mouse hovers on top of it.
table { width : 100%; } table, th, td { border : 1px solid #333; } tr:hover { background-color : lightyellow; }