Cascading Style Sheets (CSS)
Style a table
This CSS tutorial will style a Table.
Adding
- Background image
- Horizontal borders
- Vertical border
- Border around the table
The CSS code:
/* Adding Border Around The Table */
table {
border-collapse: collapse;
border: 8px ridge blue;
border-spacing: 0;
width: 650px;
height:300px;
margin-left:auto;
margin-right:auto;
background-image:url(sea.png);
border-width: 8px;
}
/* Adding Horizontal Borders */
tr.top_line1 td {
border-top: 8px groove yellow;
}
tr.top_line2 td {
border-top: 8px groove green;
}
tr.top_line3 td {
border-top: 8px groove red;
}
/* Adding Vertical Borders */
td.left {
border-left: 8px groove red;
}
The table code:
<table border="0" id="table2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="top_line1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="top_line2">
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr class="top_line3">
<td class="left"> </td>
<td> </td>
</tr>
</table>
This will give us a table like the image below. You can also easy add different images to each row groups in your table and giving your table a visual appeal.
No User Comments.
No User Comments, be the first one to write your comments?
