Create Table in Html | itfasilkom.blogspot.om

Tabel adalah kumpulan antara baris dan kolom. Dalam pemrograman html tabel sering digunakan. Dengan tabel pula kita bisa membuat layout web. Namun alangkah lebih baik jika kita menggunakan CSS, karena CSS adalah bahasa pemrograman web yang dikhususkan untuk urusan style dalam web.

Langkah awal membuat tabel di html diawali script <table> diakhiri </table>
atribut dasar tabel:
tr ==> table row
td ==> table cell
th ==> table header
dalam membuat tabel jangan lupa anda menggunakan border. Jika anda tidak memasukkan atribut border di dalam script tabel maka tabel tersebut tidak akan ada garis bingkainya.

Berikut berbagai contoh tabel di html


Tabel sederhana dengan tr dan td

1	2	3
4	5	6
7	8	9

Script

<table border="1px">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody></table>

Tabel dengan header

No	Nama	Nilai
1	Johan Angelo	6
2	Slamet	9

Script

<table border="1px">
<tbody>
<tr>
<th>No</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>1</td>
<td>Johan Angelo</td>
<td>6</td>
</tr>
<tr>
<td>2</td>
<td>Slamet</td>
<td>9</td>
</tr>
</tbody></table>

Tabel dengan Vertical Header

Nama	Johan
Telepon	1232312313
Mobile	4329843920843

Script

<table border="1px">
<tbody>
<tr>
<th>Nama</th>
<td>Johan</td>
</tr>
<tr>
<th>Telepon</th>
<td>1232312313</td>
</tr>
<tr>
<th>Mobile</th>
<td>4329843920843</td>
</tr>
</tbody></table>

Tabel dengan Caption

Data Telpon

Nama	Telpon
Joni	1232
sdasd	123213

Script

<table border="2">
<tbody>
</tbody><caption>Data Telpon</caption>
<tbody>
<tr>
<th>Nama </th>
<th>Telpon </th>
</tr>
<tr>
<td>Joni</td>
<td>1232</td>
</tr>
<tr>
<td>sdasd</td>
<td>123213</td>
</tr>
</tbody></table>

Tabel dengan Merger Colom Span

tunggu tutorial selanjutnya ya :)