Penulis 
Buat Tabel Bagan
Salin dan tempelkan kode di bawah ini untuk menambahkan 4 baris berikut, 3 tabel bagan kolom. Berfungsi di situs web HTML5 dan HTML 4.01 dan template web.
Catatan: Di situs web dan template web yang responsif , berhati-hatilah saat menambahkan lebih banyak kolom sehingga tabel Anda tidak melebihi lebar sekitar 300 piksel (teks akan dibungkus) dan Anda mempertahankan respons halaman web Anda.
Langkah 1: Tambahkan ke halaman HTML Anda:
Langkah 2: Tambahkan ke file gaya CSS Anda:
Dapat ditambahkan ke bagian bawah file css global Anda atau di sebagian besar tempat lainnya. Jika Anda menggunakan opsi ini jangan tidak menggunakan opsi Langkah 3 bawah.
Salin dan tempelkan kode di bawah ini untuk menambahkan 4 baris berikut, 3 tabel bagan kolom. Berfungsi di situs web HTML5 dan HTML 4.01 dan template web.
Catatan: Di situs web dan template web yang responsif , berhati-hatilah saat menambahkan lebih banyak kolom sehingga tabel Anda tidak melebihi lebar sekitar 300 piksel (teks akan dibungkus) dan Anda mempertahankan respons halaman web Anda.
| Nama Barang | Rincian Barang | Ukuran |
| Nama A | Det. A | 1 |
| Nama B | Det B | 2 |
| Nama C | Det C | 3 |
Langkah 1: Tambahkan ke halaman HTML Anda:
<table class="chartone"><tr><td class="c1title">
Item Name<br>
</td><td class="c1title">
Item Details<br>
</td><td class="c1title">
Size<br>
</td></tr><tr><td>
Name A<br>
</td><td>
Det A<br>
</td><td>
1<br>
</td></tr><tr><td>
Name B<br>
</td><td>
Det B<br>
</td><td>
2<br>
</td></tr><tr><td>
Name C<br>
</td><td>
Det C<br>
</td><td>
3<br>
</td></tr></table>
Langkah 2: Tambahkan ke file gaya CSS Anda:
Dapat ditambahkan ke bagian bawah file css global Anda atau di sebagian besar tempat lainnya. Jika Anda menggunakan opsi ini jangan tidak menggunakan opsi Langkah 3 bawah.
table.chartone, table tr.chartone, table td.chartone
{ border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; border: 0; }
table.chartone td {
padding: 7px 7px 7px 7px;
border-spacing: 0;
border: #B4BED0 1px solid;
background-color: transparent;
}
.chartone {
color: #000000;
font: normal 11px arial, sans-serif;
border: #000000 1px solid;
}
table td.c1title {
color: #FFFFFF;
font: bold 14px arial, sans-serif;
background-color: #92A2C2;
}
Langkah 3: Tambahkan ke bagian kepala halaman HTML Anda: Secara
opsional ... Gunakan kode ini HANYA jika Anda tidak memiliki file CSS global (style.css atau nama yang serupa). Anda dapat melihat kode sumber halaman ini untuk melihat di mana kode berikut ditambahkan ke bagian <head> pada halaman HTML Anda.
<style type="text/css">
table.chartone, table tr.chartone, table td.chartone
{ border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; border: 0; }
table.chartone td {
padding: 7px 7px 7px 7px;
border-spacing: 0;
border: #B4BED0 1px solid;
background-color: transparent;
}
.chartone {
color: #000000;
font: normal 11px arial, sans-serif;
border: #000000 1px solid;
}
table td.c1title {
color: #FFFFFF;
font: bold 14px arial, sans-serif;
background-color: #92A2C2;
}
</style>
EmoticonEmoticon