Tugas RPL SMK

Kumpulan Materi RPL SMK

18 September 2016

Cara Membuat Tabel Pada HTML

Posted by Kurnia Aji at 18 September Labels:

Tabel adal suatu tempat untuk menaruh data-data didalam kolom, tabel terdiri dari kolom dan baris, lalu bagaimana dengan tabel di HTML. Pada HTML tabel menggunakan 3 elemen yaitu  <table>, <tr> (table rows) untuk membuat baris, dan <td> (table data) yang digunakan untuk membuat kolom-kolom. Berikut beberapa contoh penggunaan tabel pada HTML. 

1. Tabel Sederhana


<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

- Hasil

Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2


2. Tabel Dengan Ukuran


<table border="1" style="height:100px;width:200px;">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

- Hasil
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2


3. Menggabungkan Baris Pada Tabel

<table border="1">
<tr>
<td rowspan="2">Baris 1 dan 2 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
</tr>
</table>

- Hasil
Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1


4. Menggabungkan Kolom Pada Tabel


<table border="1">
<tr>
<td colspan="2">Baris 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

-Hasil

Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2


5. Membuat Judul Pada Tabel


<table border="1">
<tr>
<th>Judul Kolom 1</th>
<th>Judul Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

- Hasil

Judul Kolom 1 Judul Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2


6. Menambah Background Pada Tabel

<table border="1" style="background: red;">
<tbody>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</tbody></table>

- Hasil

Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )