How to Set Style Tables on HTML using CSS

1 Juli 2009     Tag: ,
Home » Tutorials » How to Set Style Tables on HTML using CSS

By default, usually in the Table will appear in the HTML browser, such as that shown in the  example to create a Tags Table.

But using CSS Table, we can set the elements of the existing elements in the Table, such as Text, Image and Background. For example we want to create a table like this:

List of Student Class IIIA
Name Address Date of Birth
Andy. R Jl. Setia Budi, 20A 22-4-1992
Budianto Jl. Merdeka, 23B 12-2-1993
Brandy. W Jl. Anyelir, 11C 10-1-1992
Cyntia Dewi Jl. Pahlawan. 10C 13-8-1993
The solution is as follows:
First, we create the HTML code by using its Class and ID Selector, for example:

<table border=”0″>
<th colspan=”3″>List of Student Class IIIA</th>
<td>Date of  Birth</td>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>Jl. Merdeka, 23B</td>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>

Second, we make its CSS file as follows:

table.listItem {
border:1px #009966 solid;

table.listItem th {

table .nameItem {

table .oldRow {

table .evenRow {
background: #00CC99;}

OK, download the HTML code and CSS code above, and if you see in the browser as a result will like Table above.
Congratulations ….! Testing

Bagikan Artikel:

Saran dan Komentar

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *