CSS Tables Tutorial - codeswithpankaj
CSS provides various properties to style HTML tables, making them more attractive and easier to read. This tutorial will cover basic table styling, borders, collapsed borders, and alternating row colors.
1. Basic Table Styling
You can apply basic styles to your tables to improve their appearance.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Basic Table Styling - codeswithpankaj</ title >
< style >
table {
width : 100 % ;
border-collapse : collapse ;
}
th , td {
padding : 8 px ;
text-align : left ;
border-bottom : 1 px solid #ddd ;
}
th {
background-color : #f2f2f2 ;
}
</ style >
</ head >
< body >
< table >
< tr >
< th >Name</ th >
< th >Age</ th >
< th >City</ th >
</ tr >
< tr >
< td >John</ td >
< td >25</ td >
< td >New York</ td >
</ tr >
< tr >
< td >Jane</ td >
< td >30</ td >
< td >Los Angeles</ td >
</ tr >
</ table >
</ body >
</ html > In this example, the table has a full width, collapsed borders, and padding for cells. The header row is styled with a background color.
2. Table Borders
Adding borders to your table can help delineate the cells clearly.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Table Borders - codeswithpankaj</ title >
< style >
table , th , td {
border : 1 px solid black ;
border-collapse : collapse ;
}
th , td {
padding : 8 px ;
text-align : left ;
}
</ style >
</ head >
< body >
< table >
< tr >
< th >Name</ th >
< th >Age</ th >
< th >City</ th >
</ tr >
< tr >
< td >John</ td >
< td >25</ td >
< td >New York</ td >
</ tr >
< tr >
< td >Jane</ td >
< td >30</ td >
< td >Los Angeles</ td >
</ tr >
</ table >
</ body >
</ html > This example shows a table with solid borders around the table, header, and cells.
3. Collapsed Borders
The border-collapse property can be used to collapse the borders of the table for a cleaner look.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Collapsed Borders - codeswithpankaj</ title >
< style >
table {
border-collapse : collapse ;
width : 100 % ;
}
th , td {
border : 1 px solid black ;
padding : 8 px ;
text-align : left ;
}
</ style >
</ head >
< body >
< table >
< tr >
< th >Name</ th >
< th >Age</ th >
< th >City</ th >
</ tr >
< tr >
< td >John</ td >
< td >25</ td >
< td >New York</ td >
</ tr >
< tr >
< td >Jane</ td >
< td >30</ td >
< td >Los Angeles</ td >
</ tr >
</ table >
</ body >
</ html > In this example, the borders of the table cells are collapsed, creating a seamless border between them.
4. Alternating Row Colors
Adding alternating row colors improves the readability of tables.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Alternating Row Colors - codeswithpankaj</ title >
< style >
table {
width : 100 % ;
border-collapse : collapse ;
}
th , td {
padding : 8 px ;
text-align : left ;
border-bottom : 1 px solid #ddd ;
}
th {
background-color : #f2f2f2 ;
}
tr :nth-child ( even ) {
background-color : #f9f9f9 ;
}
</ style >
</ head >
< body >
< table >
< tr >
< th >Name</ th >
< th >Age</ th >
< th >City</ th >
</ tr >
< tr >
< td >John</ td >
< td >25</ td >
< td >New York</ td >
</ tr >
< tr >
< td >Jane</ td >
< td >30</ td >
< td >Los Angeles</ td >
</ tr >
</ table >
</ body >
</ html > In this example, every even row has a different background color, making the table easier to read.
This tutorial covers essential CSS properties for styling tables. For more tutorials and examples, visit codeswithpankaj.com .
Last updated 4 months ago
