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

URAIAN	ANGKA	HURUF
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

 
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;
}

URAIAN	ANGKA	HURUF
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

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).

URAIAN	ANGKA	HURUF
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Bentuk terakhir adalah menggunakan properti tabel secara lengkap (thead, tbody,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

URAIAN	KETERANGAN
	ANGKA	HURUF
Jumlah	1111	Seribu Seratus Sebelas
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

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.