Sepertinya sudah tidak asing lagi tentang Bagaimana Cara membuat tabel ( table ) untuk blog ,baik akan kita bahas Sedikit mengenai tentang Tabel ini , Seperti yang kita ketahui tabel ini berfungsi untuk mem perinci dan memperjelas Post / Artikel dengan detail tertentu.Tabel ini menampilkan diantaranya seperti nomor ( biasanya di sisi kiri ),sedang isi /kolom ditengah ,di sisi kanan biasanya keterangan .oke ,, akan kita buat Tabel ini sesederhana mungkin .
Berikut langkah - langkahnya :
Cara membuat tabel menggunakan html :
Properti yang akan kita gunakan yaitu :
No | Properti | Keterangan |
---|---|---|
1. | table | untuk membuat garis pinggir secara keseluruhan |
2. | tr | untuk membuat baris dari atas ke bawah |
3. | th | sebagai table heading atau induk td |
4. | td | untuk mengisi kolom / isi dari kiri ke kanan |
kode di atas sebagai berikut :
<table style="background:#ddd; cellpadding="0" cellspacing="0" border="1" width="80%"><tbody><tr><th style="background:blue; color:white; font-style:bold; font-size:13px; width="15%">No</th><th style="background:blue; color:white; font-style:bold; font-size:13px;width="25%">Properti</th>
<th style="background:blue; color:white; font-style:bold; font-size:13px;width="35%">Keterangan</th></tr><tr><td>1.</td><td><b>table</b></td><td>untuk membuat garis pinggir secara keseluruhan </td></tr><tr><td>2.</td><td><b>tr</b></td><td>untuk membuat baris dari atas ke bawah</td></tr>
<tr><td>3.</td><td><b>th</b></td><td>sebagai table heading atau induk td</td></tr>
<tr><td>4.</td><td><b>td</b></td><td>untuk mengisi kolom / isi dari kiri ke kanan</td></tr></tbody></table>
<th style="background:blue; color:white; font-style:bold; font-size:13px;width="35%">Keterangan</th></tr><tr><td>1.</td><td><b>table</b></td><td>untuk membuat garis pinggir secara keseluruhan </td></tr><tr><td>2.</td><td><b>tr</b></td><td>untuk membuat baris dari atas ke bawah</td></tr>
<tr><td>3.</td><td><b>th</b></td><td>sebagai table heading atau induk td</td></tr>
<tr><td>4.</td><td><b>td</b></td><td>untuk mengisi kolom / isi dari kiri ke kanan</td></tr></tbody></table>
anda juga dapat menyesuaikan besarnya font text ( font-size ) ,lebarnya table( width ) dan background td berbeda berikut contohnya :
<table border="1" cellpadding="1" cellspcing="0" style="width: 80%;"><tbody>
<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 2</td></tr>
</tbody></table>
Hasil :<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 2</td></tr>
</tbody></table>
No | Properti | |
---|---|---|
1. | <table> --> | untuk membuat tabel secara keseluruhan ( garis tepi ) dan di tutup dengan </table> |
2. | <tr> --> | untuk membuat baris dari atas ke bawah di tutup dengan </tr> |
3. | <th> --> | sebagai table heading ( induk dari td /isi kolom ) di tutup dengan </th> |
4. | <td> --> | untuk mengisi kolom dari kiri kekanan di tutup dengan </td> |
Table Heading 1 | Table Heading 2 |
---|---|
kolom 1 | kolom 2 |
<table border="0" cellpadding="1" cellspcing="0" style="width: 80%;"><tbody>
<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 2</td></tr>
<tr><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 Kolom 1</td><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 kolom 2</td></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 2</td></tr>
</tbody></table>
Hasil :<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 2</td></tr>
<tr><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 Kolom 1</td><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 kolom 2</td></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 2</td></tr>
</tbody></table>
Table Heading 1 | Table Heading 2 |
---|---|
Baris 1 Kolom 1 | Baris 1 Kolom 2 |
Baris 2 Kolom 1 | Baris 2 kolom 2 |
Baris 3 Kolom 1 | Baris 3 Kolom 2 |
Saya kira cukup sekian tentang Cara membuat table Html,Semoga bermanfaat bagi sobat,
Jangan lupa like ya ,,
0 komentar
Posting Komentar