Includes the entire website plus 3 bonus chapters: Favicon, CSS navigation bar, & inserting Google Map in a web page.
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:
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;}
All the information on this website is also provided in a PDF book for only $30.
Click here to buy.
Home | Internet Basics | Fundamentals | Images & Storyboard | Styling Pages | Page Layout | Languages | Contact us
DigestWebDesign.com offers free Website Design, HTML and CSS Lessons.
Copyright © 2012 - DigestWebDesign.com