Muadz's Blog - 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. Sedangkan HTML akan tampak seperti biasa saja,
Uraian | Angka | Huruf |
---|---|---|
Satuan | 1 | Satu |
Puluhan | 10 | Sepuluh |
Ratusan | 100 | Seratus |
<table>
<caption>Judul Tabel</caption>
<!-- baris pertama untuk table row (tr) -->
<tr>
<!-- kolom table head (th) -->
<th>Uraian</th> <!-- kolom pertama -->
<th>Angka</th> <!-- kolom kedua -->
<th>Huruf</th> <!-- kolom ketiga -->
</tr>
<!-- baris kedua -->
<tr>
<!-- kolom table data (td) -->
<td>Satuan</td>
<td>1</td>
<td>Satu</td>
</tr>
<!-- baris ketiga -->
<tr>
<td>Puluhan</td>
<td>10</td>
<td>Sepuluh</td>
</tr>
<!-- baris ke-empat -->
<tr>
<td>Ratusan</td>
<td>100</td>
<td>Seratus</td>
</tr>
</table>
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;
.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;
}
Uraian | Angka | Huruf |
---|---|---|
Satuan | 1 | Satu |
Puluhan | 10 | Sepuluh |
Ratusan | 100 | Seratus |
: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).Uraian | Angka | Huruf |
---|---|---|
Satuan | 1 | Satu |
Puluhan | 10 | Sepuluh |
Ratusan | 100 | Seratus |
Ribuan | 1000 | Seribu |
thead
, tbody
, tfoot
), namun mungkin tidak sering digunakan.<table>
<caption>Judul Tabel</caption>
<!-- table head (thead) -->
<thead>
<tr>
<th rowspan="2">Uraian</th> <!-- menggabungkan 2 baris -->
<th colspan="2">Keterangan</th> <!-- menggabungkan 2 kolom -->
</tr>
<!-- pisahkan kembali dengan table row (tr) -->
<tr>
<th>Angka</th>
<th>Huruf</th>
</tr>
</thead>
<!-- table foot (tfoot), nanti letak tampilannya tetap pada bagian bawah tabel -->
<tfoot>
<tr>
<td>Jumlah</td>
<td>1111</td>
<td>Seribu Seratus Sebelas</td>
</tr>
</tfoot>
<!-- table body (tbody) -->
<tbody>
<tr>
<td>Satuan</td>
<td>1</td>
<td>Satu</td>
</tr>
<tr>
<td>Puluhan</td>
<td>10</td>
<td>Sepuluh</td>
</tr>
<tr>
<td>Ratusan</td>
<td>100</td>
<td>Seratus</td>
</tr>
</tbody>
</table>
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 a
dan/atau a:link
.Uraian | Keterangan | |
---|---|---|
Angka | Huruf | |
Jumlah | 1111 | Seribu Seratus Sebelas |
Satuan | 1 | Satu |
Puluhan | 10 | Sepuluh |
Ratusan | 100 | Seratus |
Ribuan | 1000 | Seribu |
Terimakasih
Telah Berkunjung ke Muadz's Blog
Kritik dan Saran Anda Sangat Membantu
^_^
Telah Berkunjung ke Muadz's Blog
Kritik dan Saran Anda Sangat Membantu
^_^
0 komentar:
Posting Komentar