Tutorial CSS - Mengatur Format Tabel dengan CSS

Tabel dalam website dapat diatur tampilannya menggunakan CSS. Mulai dari pengaturan tinggi, lebar, warna background, border, dll hingga membuat tabel zebra (selang-seling warna). Mengatur format tabel dengan CSS seperti halnya Anda mengatur tabel tersebut di HTML nya langsung.
Tetapi manfaat dari CSS adalah dapat mengaplikasikan format ke seluruh selectornya sehingga lebih praktis.

Dalam tabel ada element th, tr, dan td serta table. Element-element itulah yang akan digunakan sebagai selector di CSS. Yang pertama mari mengatur lebar, tinggi dan padding tabel.

table {
     width : 100%;
}

td, th {
     height : 45px;
     padding : 10px;
}

Style di atas akan mengatur tabel dengan lebar 100% atau memenuhi layar. Kemudian setiap blok di tabelnya (td) memiliki tinggi 45px dan padding di setiap sisinya 10px. Yang kedua kita akan mengatur border, background tabel, dan text align.

table, th, tr, td {
     border : solid 1px #0560d0;
}

table {
     background-color : #9dc1ee;
     text-align : center;
     vertical-align : center;
}

th {
     background-color : #0560d0;
     color : #fff;
}

Dari format di atas, setiap blok akan memiliki border garis dengan ketebalan 1px dan berwarna #0560d0. Tabel memiliki background dengan warna #9dc1ee, text terletak di tengah secara horizontal, dan secara vertikal juga terletak di tengah pula berdasarkan property vertical-align : center;. Untuk 'th' atau kepala tabel akan memiliki background berwarna #0560d0, dan warna teks #fff atau putih.

Sehingga style lengkap dari tutorial CSS kali ini seperti berikut.

table {
     width : 100%;
     background-color : #9dc1ee;
     text-align : center;
     vertical-align : center;
}

td, th {
     height : 45px;
     padding : 10px;
}

table, th, tr, td {
     border : solid 1px #0560d0;
}

th {
     background-color : #0560d0;
     color : #fff;
}

Misal di HTML kita membuat script tabel seperti di bawah ini.

<table>
<tr>
<th>Nama</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>M. Syaifullah Alfaruq</td>
<td>Bantul</td>
<td>29 Juni 1996</td>
</tr>
<tr>
<td>M. Fakhri Z. A.</td>
<td>Bantul</td>
<td>1 Januari 1999</td>
</tr>
<tr>
<td>Fatimah Az-zahra</td>
<td>Bantul</td>
<td>12 Juni 2001</td>
</tr>
</table>

Sehingga tampilan tabel akan seperti di bawah ini.

Nama	Tempat Lahir	Tanggal Lahir
M. Syaifullah Alfaruq	Bantul	29 Juni 1996
M. Fakhri Z. A.	Bantul	1 Januari 1999
Fatimah Az-zahra	Bantul	12 Juni 2001

Sekian tutorial mengatur format tabel dengan CSS. Jika ada pertanyaan silakan koment saja. Semoga bermanfaat dan terus berkarya :)