Membuat Layout Dengan Tabel dan CSS


Kali ini kita akan memodifikasi bagian isi website dan menambahkan tabel untuk layout pada bagian isi, di sini kita akan mempelajadi tentang tabel, colspan, rowspan juga penggunaan inline CSS, yaitu kode CSS yang dituliskan di dalam tag untuk memodifikasi masing-masing elemen dalam tabel.

Misalnya kita akan menambahkan sebuah interface dalam bagian isi pada kode html yang sudah kita buat sebelumnya sehingga tampilan website kita menjadi seperti di bawah ini :



Sebelumnya kita akan membahas mengenai colspan dan rowspan. colspan dan rowspan menunjukkan seberapa lebar sebuah kolom atau baris terbentang di dalam sebuah tabel, misalnya sepanjang 2 kolom atau setinggi 3 baris, sesuai dengan ukuran lebar maupun tinggi sebuah elemen tabel.

Pada gambar di atas kita akan menggunakan colspan untuk baris kedua dan menggunakan rowspan untuk baris ketiga kolom pertama, dimana masing-masing baris dan kolom tabel tersebut terbentang sepanjang 2 baris dan 2 kolom.

Sekarang kita mengganti bagian isi dengan tabel. Untuk membuat tabel kita menggunakan tag <table> </table> sementara di dalamnya akan terdapat baris dengan tag <tr> </tr> dimana di dalam baris tersebut akan terdapat kolom dengan tag <td> </td>. Sehingga struktur dasar kode HTML untuk tabel dengan dua baris dan dua kolom adalah sebagai berikut :

<table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

Setelah mengetahui struktur dasar sebuah tabel, kita akan mulai membuat tabel seperti di atas dengan bantuan inline-CSS untuk memodifikasi masing-masing elemen tabel dan external CSS untuk memodifikasi keseluruhan tabel. Karena hanya akan ada satu tabel yang kita format dan menggunakan inline-CSS maka kita tidak memerlukan ‘id’ sebagai identifier elemen.

Pertama kita siapkan dulu sebuah tabel, sesuai dengan tampilan di atas, kita siapkan tabel dengan 4 baris.

Mengapa 4 baris ?
Karena pada bagian Baris 3 kolom 1 adalah 1 baris tabel yang terbentang setinggi 2 baris, sehingga total ada 4 baris tabel.

Tabel tersebut akan memiliki dua kolom pada baris pertama, satu kolom pada baris kedua yang akan dibentangkan sepanjang dua kolom menggunakan colspan, sementara untuk baris ketiga yang terdiri dari dua baris kita akan memiliki dua kolom pada baris ketiga dan satu kolom pada baris keempat dimana kolom pada baris keempat ini akan otomatis berada di sebelah kanan Baris ketiga kolom satu dengan menggunakan rowspan dimana Baris ketiga kolom pertama akan terbentang setinggi dua baris.

Kode HTML untuk tabel di atas dengan mengaplikasikan colspan dan rowspan adalah sebagai berikut :


<table>
  <tr>
    <td>Baris 1 kolom 1</td>
    <td>Baris 1 kolom 2</td>
  </tr>
  <tr>
    <td colspan="2">Baris 2</td>
  </tr>
  <tr>
    <td rowspan="2">Baris 3 kolom 1</td>
    <td>Baris 3 kolom 2a</td>
  </tr>
  <tr>
    <td>Baris 3 kolom 2b</td>
  </tr>
</table>

Perhatikan pada script di atas, rowspan diaplikasikan pada baris ketiga kolom pertama, dengan demikian baris ketiga kolom kedua dan baris keempat yang hanya terdiri dari satu kolom akan otomatis menjadi baris ketiga kolom 2a dan 2b.

Sementara kode CSS untuk tabel yang kita tuliskan dalam file style.css adalah :

table {
    width: 100%;
    background-color: #999;
}

table td {
    background-color: #555;
	color: #fff;
}

kode di atas akan membuat tabel memiliki lebar 100% atau sama lebar dengan kontainer yang sudah kita buat sebelumnya dan memiliki warna background dengan kode #999 atau #999999 serta semua elemen td akan memiliki warna background dengan kode warna #555 atau #555555 dengan warna teks putih. Bila tidak ditentukan, maka lebar kolom akan otomatis menyesuaikan dengan lebar tabel (dalam hal ini 50%).

Setelah memodifikasi tabel secara umum, sekarang kita akan memodifikasi masing-masing ukuran elemen dalam tabel. Misalnya kita ingin membuat tabel dengan ukuran berbeda dengan contoh di atas.

Saya ingin baris pertama memiliki tinggi 100 pixel, baris kedua memiliki tinggi 150 pixel, baris ketiga 200 pixel dengan baris ketiga kolom 2a memiliki tinggi 50 pixel dan kolom 2b memiliki tinggi 150 pixel. sehingga kita akan menyisipkan sebuah inline CSS dalam masing-masing elemen tabel.

inline CSS ditulis dengan style=”  “ di dalam tag dan di dalam tanda petik kita bisa menuliskan kode CSS seperti biasa, sehingga kode di atas menjadi :

<table>
<tr style=”height: 100px;”>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=”2″ style=”height: 150px;”> Baris 2</td>
</tr>
<tr>
<td rowspan=”2″ style=”height: 200px;”> Baris 3 kolom 1</td>
<td style=”height: 50px;”> Baris 3 kolom 2a</td>
</tr>
<tr>
<td>Baris 3 kolom 2b</td>
</tr>
</table>

Untuk baris terakhir boleh ditulis ukuran heightnya, bila tidak ditulis maka tinggi akan otomatis menyesuaikan dengan tinggi elemen di sampingnya dan ruang yang tersisa (200px – 50px = 150px).

Dengan kode di atas maka interface bagian isi akan menjadi :



Dengan menggunakan tabel kita juga bisa membuat interface yang terdiri dari header, isi, sidebar dan footer, kita juga bisa memasukkan tabel di dalam tabel untuk interface yang lebih bervariasi. Dengan kode dasar untuk tabel dan CSS di atas kita bisa bereksperimen dengan interface menggunakan tabel untuk membuat berbagai interface lain yang lebih kompleks.

Berikutnya kita akan membuat sebuah menu untuk website kita yang memiliki submenu dan masih hanya menggunakan HTML dan CSS.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Jan 28, 2016
Tags : , ,


www.000webhost.com