Contoh Tabel dengan HTML
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Contoh diatas menjelaskan :
definisi tabel dengan tag <table>
yang menunjukkan tabel baris dengan tag <tr>
Tabel baris juga menjadi data tabel dengan tag <td>
sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan tag <th>
Sebuah tabel HTML dengan Astribut Perbatasan
Jika anda tidak menemukan perbatasan di HTML (tabel) yang akan ditampilkan, makan anda dapat menambahkan menggunakan Atribur border :
CONTOH :
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Cara untuk menambah perbatasan tersebut, anda dapat menggunakan properti perbatasan CSS
CONTOH
table, th, td {
border: 1px solid black;
}
INGAT.....!!!!
Untuk menentukan batas-batasan
Sebuah tabel HTML dengan Borders Collapsed, jika anda ingin perbatasan runtuh kedalam satu batasan maka tambahkan di CSS berder-collapse :
CONTOH :
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Sebuah tabel HTML dengan SEL Padding.
Sel bantalan menentukan ruang antara isi sel dan perbatasannya, jika anda tidak menentukan bantalan, maka sel-sel dapat ditampilkan tanpa Padding, untuk mengatur paddingnya, gunakan properti CSS Padding :
CONTOH
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Munggunakan Judul dengan HTML
Dapat didefinisikan dengan menggunakan tag <th>
Secara default, semua browser diutamakan menampilkan judul ditabel sebagai penarik pembaca artiker tersebut.
CONTOH
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Untuk mengatur Tempat Kalimat (Kanan,Tengan, atau kiri)
CONTOH
th {
text-align: left;
}
HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan ruang anttara sel-sel.
Untuk mengatur jarak perbatasan, gunakan properti CSS border-Spacing
CONTOH
table {
border-spacing: 5px;
}
HTML dengan perintah CAPTION
Untuk menambah keterangan, gunakan tag <caption>;
CONTOH :
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Membuat tabel sel yang rentang dan banyak garisUntuk membuat rentang pada sel dari satu baris, maka gunakan atribut rowpan :
Contoh :
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Catatan : tag <caption> ini harus segera setelah tag <table>
GAYA yang berbeda dalam sebuah tabel.
Sebagai besar contoh di atas menggunakan atribut style (width="100%") untuk mmenentukan lebarnya. Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabl yang berbeda. Gaya dalam <head>, bagaimanapun untuk menentukan gaya semua tabel dihalaman tersebut. Untuk menentukan gaya khusus untuk sebuah tabel maka gunakan contoh dibawah ini :
Contoh :<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Sekarang anda dapat menentukan gaya yang berbeda untuk tabel ini :
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Dan anda dapat menambahkan gaya yang lebih :
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
LABEL TABEL HTML
LABEL DESKRIPSI
<table> Mendefinisikan tabel
<th> Mendefinisikan sebuah sel header tabel
<tr> Mendefinisikan baris dalam tabel
<td> Mendefinisikan sel dalam sebuah tabel
<caption> Mendefinisikan sebuah caption tabel
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<col> Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
<thead> Grup isi header dalam sebuah tabel
<tbody> Grup isi tubuh dalam sebuah tabel
<tfoot> Grup isi footer di TABEL
SEMOGA BERMANFAAT......!!!!!!
0 comments:
Post a Comment