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:


<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>



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;




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;



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    >>