How to make stylish table in CSS?

Posted on December 27th, 2010 in Academic by oki.maulana08

Hello guys, I’m student of Bogor Agricultural University. This time, I will share with you about “How to make stylish table in CSS?”

Oke…

  1. First look at the HTML code below!

<table width=”446″ border=”1″ align=”center” class=”gridtable”>
<tr>
<th width=”164″><div align=”center”>Name </div></th>
<th width=”190″><div align=”center”>Address </div></th>
<th width=”70″>School</th>
</tr>

<tr>
<td>Oki Maulana</td>
<td>Bogor</td>
<td>Bogor Agricultural University</td>
</tr>
</table>

  1. And then look at the CSS code below!

<style type=”text/css”>
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>

Ok! You can put the CSS code in html file or you put it in another file (extension must be .css).

Post a comment