Bagaimana cara membuat tabel pada HTML
Rabu, 14 Mei 2014
0
komentar
| Nomor | Nama | Aktivitas |
|---|---|---|
| 001 | Hari Agustian | Membuat tabel |
| 002 | Budiman | Membuat Blog di Learn to Code |
| 003 | Yulia | Memposting artikel di Learn to Code |
Tabel pada html terdiri dari dua bagian diantaranya <Thead > sebagai pembentuk kolom dan <Tbody> sebagai content pada kolom yang telah di buat, dan untuk membuat Row pada tabel anda dapat menggunakan element HTML berupa <Tr>.
Namun untuk mengisi cell atau field pada tiap kolom dan baris anda memerlukan element html berupa <Td>
Lihat struktur html pembentuk tabel di atas.
<body>
......
<table>
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Aktivitas</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Hari Agustian</td>
<td>Membuat Table</td>
</tr>
<tr>
<td>002</td>
<td>Budiman</td>
<td>Membuat Blog di <a href="https://learntocodes.blogspot.com/">Learn to Code</a></td>
</tr>
<tr>
<td>003</td>
<td>Yulia</td>
<td>Memposting artikel di <a href="https://learntocodes.blogspot.com/">Learn to Code</a></td>
</tr>
</tbody>
</table>
.....
</body>
Anda dapat dengan mudah menghias atau memperindah tampilan tabel yang telah anda buat dengan menggunakan css, dibawah ini adalah gambaran printah css sederhana, tapi belum saya test yaa : )
<head> ..... <style type= text/css> /* css tabel */ thead > tr { background-color:#eeeeee }; thead > tr > th { border:thin #aeaeae solid} tbody > tr { background-color:#ffffff }; tbody > tr > td { border:thin #aeaeae solid} </style> ..... </head> <body> .....
0 komentar:
Posting Komentar