Styling Tables

 

You can style tables using CSS rules. Each table element including table, th, td and tr can be styled individually or together. Here's an example:

 

HTMT Code:

 

<table>
<tr>    <th>Table Head1</th>           <th>Table Head 2</th>     </tr>
<tr>    <td>Table data 1 in row 1</td>          <td>Table data 2 in row 1</td>  </tr>
<tr>     <td>Table data 1 in row 2</td>     <td>Table data 2 in row 2</td>      </tr>
</table>

 

 

CSS Code:

 

table, td, th {

border:1px solid green;

}

 

table {
height: 100px;
width: 600px;
}

 

th {
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #390;
}

 

td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 10px;
}

 

Result:

 

table styling example

 

NOTE: In order to remove the spacing between cells you need to add the following line to the table styling:

 

table {
border-spacing: 0;
}

 

For zebra-striped tables use: tr:nth-child(even){background-color: #f2f2f2;}

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>