Warning: curl_init() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 95

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 97

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 98

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 100

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 103

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 106

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 333

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 334

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 363

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 370

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 375

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 376

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 377

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 379

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 382

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 150

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 151

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 159

Warning: curl_exec() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 162

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 181

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 182
Mengatur style table HTML dengan CSS | Gusdwi.info

Mengatur style table HTML dengan CSS

Secara default, Biasanya Table pada HTML akan tampak pada browser seperti contoh yang ditampilkan pada Tag untuk membuat Table. Tetapi dengan menggunakan CSS Table, kita dapat mengatur elemen elemen yang ada didalam Table seperti Teks, Gambar dan Backgroundnya. Misalnya kita ingin membuat Table seperti dibawah ini:

Daftar Siswa Kelas IIIA
Nama Alamat Tgl Lahir
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

Solusinya adalah sebagai berikut:
Pertama, kita buat kode HTML nya dengan menggunakan Class dan ID Selector, contoh:

<table border=”0″>
<tbody>
<tr>
<th colspan=”3″>Daftar Siswa Kelas IIIA</th>
</tr>
<tr>
<td>Nama</td>
<td>Alamat</td>
<td>Tgl Lahir</td>
</tr>
<tr>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>22-4-1992</td>
</tr>
<tr>
<td>Budianto</td>
<td>Jl. Merdeka, 23B</td>
<td>12-2-1993</td>
</tr>
<tr>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>10-1-1992</td>
</tr>
<tr>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>
<td>13-8-1993</td>
</tr>
</tbody>
</table>

Kedua, kita buatkan file CSS nya seperti berikut:

table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}

table.listItem th {
font-size:1.4em;}

table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}

table .oldRow {
background:#009999;}

table .evenRow {
background: #00CC99;}

Nah, Coba anda Download kode HTML dan Download kode CSS diatas, dan jika anda lihat dibrowser maka hasilnya akan seperti Table di atas.
Selamat Mencoba….!

Tinggalkan Balasan

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