Cara Membuat Tabel di Blogger Untuk Web

Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. Yah, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi CSS.

a.
Bentuk tabel sederhana
URAIANANGKAHURUF
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Judul Tabel
Uraian Angka Huruf
Satuan 1 Satu
Puluhan 10 Sepuluh
Ratusan 100 Seratus
Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.
table {
 border-bottom: 1px solid #ddd;
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
caption {
 margin-bottom: 0;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 border-top: 1px solid #ddd;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}
CSS di atas telah disesuaikan dengan vertical rhythm struktur kode awal blog ini yakni line-height:1.6em;.
Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa caption ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah & menambah sedikit properti serta nilainya.
table,
th,
td {
 border: 1px solid #ddd;
}
th,
td {
 text-align: center;
}
URAIANANGKAHURUF
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (:hover).
tr:nth-child(2n+1) {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}
Ketentuan pemberian latar (background) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).
URAIANANGKAHURUF
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Ribuan1000Seribu
Bentuk terakhir adalah menggunakan properti tabel secara lengkap (theadtbody,tfoot), namun mungkin tidak sering digunakan.
Judul Tabel
Uraian Keterangan
Angka Huruf
Jumlah 1111 Seribu Seratus Sebelas
Satuan 1 Satu
Puluhan 10 Sepuluh
Ratusan 100 Seratus
table {
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
table,
th,
td {
 border: 1px solid #ddd;
}
caption {
 text-align: left;
 margin-bottom: .8em;
}
thead,
tbody,
tfoot {
 vertical-align: middle;
}
tfoot {
 border-top: 3px double #ddd;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 text-align: center;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}
tr:nth-child(even) /* sama dengan (2n) atau (2n+0) */ {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}
Pastikan bahwa tr:hover berada pada susunan CSS dibawah pseudo-classes posisi (:nth-child(n) dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi hover akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (link), dimana a:visited berada di bawah adan/atau a:link.
Judul Tabel
URAIANKETERANGAN
ANGKAHURUF
Jumlah1111Seribu Seratus Sebelas
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Ribuan1000Seribu
Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain & tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.

No comments:
Write komentar