How to create a table in CSS

It’s impossible to create a table by means of CSS only. The creation of a table always starts with some HTML coding. CSS can only be used to assign some style to the table. If you would have no HTML table creation knowledge at all we would advise you to first consult ‘How to create a table in HTML’. Upon mastering the creation of an HTML table and all of its corresponding characteristics, you can take a look at the below example to start styling your table with CSS:

table{
width:100%;
height:100%;
margin:0px;
padding:0px;
border:1px solid #bfbf00;
}

table td{
vertical-align:middle;
background-color:#ffffaa;
border:1px solid #bfbf00;
border-width:0px 1px 1px 0px;
text-align:center;
padding:8px;
font-size:10px;
font-family:Arial;
font-weight:bold;
color:#000000;
}

table tr:last-child td{
border-width:0px 1px 0px 0px;
}

table tr td:last-child{
border-width:0px 0px 1px 0px;
}

table tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}

table tr:first-child td{
background-color:#ffff00;
border:0px solid #bfbf00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#000000;
}

table tr:first-child:hover td{
background-color:#ffff00;
}

table tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}

table tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

How to create a table in CSS

Was this useful?

Categories