Perintah Pengaturan Tabel Pada Pemrograman HTML

Dalam membuat tampilan sebuah tabel pada perintah HTML memiliki 3 komponen perintah antara lain:

1. <TABLE> … </TABLE>

Berfungsi untuk memulai perintah mendefinisikan tampilan tabel.

2. <TR>… </TR>

Berfungsi untuk mendefinisikan baris dalam tabel.

3. <TD> … </TD> atau <TH> … </TH>

Berfungsi untuk mendefinisikan kolom dalam baris tabel.

Contoh Pendefinisian Tampilan Tabel :

<table border=1>

    <tr>    <th> Judulkolom1</th>

        <th> Judulkolom2</th>

        <th> Judulkolom3</th>

        <th> judulkolom4</th>

    </tr>

    <tr>    <td> baris2,kolom1</td>

        <td> baris2,kolom2</td>

        <td> baris2,kolom3</td>

        <td> baris2,kolom4</td>

    </tr>

    <tr>    <td> baris3,kolom1</td>

        <td> baris3,kolom2</td>

        <td> baris3,kolom3</td>

        <td> baris3,kolom4</td>

    </tr>

</table>

Hasilnya:

Dari contoh diatas dapat dipahami bahwa dalam membuat sebuah tampilan tabel pada HTML dengan cara mendefinisikan baris tabel dengan perintah <TR> terlebih dahulu kemudian baru mendefinisikan cell isi dari baris tabel yang bersangkutan dengan perintah <TD> atau <TH>.

---

Catatan:

---

---

Untuk mendefinisikan tabel dengan tampilan 1 baris dan 1 kolom, ketiga komponen perintah HTML wajib didefinisikan.

---

1. Perbedaan dari perintah <TD> dengan <TH>:

Gunakan perintah <TH> jika akan mendefinisikan cell yang berfungsi sebagai judul kolom tabel (biasanya cell-cell isi baris pertama pada tabel). Kelebihannaya adalah jika isi kolom diapit dengan perintah <TH> … </TH> maka isi kolom tersebut ditampilkan dengan huruf tebal dan rata tengah. Sedangkan <TD> digunakan untuk mendefinisikan isi kolom biasa dimana nanti akan ditampilkan dengan huruf tidak ditebalkan dan rata kiri.

2. Atribut pada komponen-komponen perintah tabel:

• Border = Angka, Atribut pada perintah TABLE untuk mengatur ketebalan bingkai tabel. Semakin besar angkanya maka garis bingkai akan semakin besar pula.
• Bordercolor = “warna”, Atribut pada perintah TABLE untuk mengatur warna bingkai tabel.
• Bgcolor= ”warna”, Atribut untuk mengatur warna latar belakang. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel.

<Table Bgcolor=”warna”>  berpengaruh pada satu tabel.

<TR Bgcolor=”warna”>  berpengaruh pada satu baris tabel.

<TD Bgcolor=”warna”>  berpengaruh pada satu cell tabel saja.

• Background= ”filegambar”, Atribut untuk mengatur warna latar belakang dengan tampilan gambar. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel
• CellSpacing=angka, Jarak antar cell dalam tabel

Cellspacing

• CellPadding=angka, Jarak antara isi cell dengan bingkai cell

Cellpadding

…isi cell…

Bingkai tabel

Kotak  cell

• Width=angka atau persen, menentukan lebar tabel. Jika didefinisikan dengan angka berarti mendefinisikan lebar tabel dengan menggunakan satuan pixel dan jika menggunakan persen berarti lebar tabel adalah sebanding dengan persentase lebar windows browser penampil. Atribut ini juga bisa digunakan pada perintah <TD> atau <TH> untuk menentukan lebar kolom pada tabel. Jika atribut ini tidak didefinisikan maka lebar tabel mengikuti lebar cell yang bergantung pada panjangnya isi pada masing-masing cell.
• Height=angka atau persen, menentukan tinggi tabel. Pendefinisiannya sama dengan penggunaan atribut Width.

3. Menggabung Cell

Pada pemrograman HTML hanya mengenal perintah menggabung cell (merge cell) tetapi tidak mengenal perintah memecah cell. Perintah pendefinisiannya adalah sebagai atribut perintah <TD> atau <TH>.

• <TD Colspan=angka>  menggabung cell beda kolom
• <TD Rowspan=angka>  menggabung cell beda baris

Contoh penggunaan perintah menggabung cell:

<table border=1>

Baris 1

<tr bgcolor=”green”>

    <th> Judulkolom1</th>

    <th> Judulkolom2</th>

    <th> Judulkolom3</th>

<th> judulkolom4</th>

</tr>

        <tr>

    <td bgcolor="pink"> baris2,kolom1</td>

Baris 2

    <td rowspan=2> baris2&3,kolom2</td>

<td rowspan=2 colspan=2> baris2&3,kolom3&4 </td>

</tr>

Baris 3

<tr>

    <td bgcolor="pink"> baris3,kolom1</td>

</tr>

<tr>

    <td colspan=2> baris4,kolom1&2</td>

    <td> baris4,kolom2</td>

    <td> baris4,kolom3</td>

Baris 4

</tr>

</table>

Width

Hasilnya:

Judulkolom1	Judulkolom2	Judulkolom3	judulkolom4
baris2,kolom1	baris2&3,kolom2	baris2&3,kolom3&4
baris3,kolom1
baris4,kolom1&2		baris4,kolom2	baris4,kolom3

Contoh Listing Membuat Tampilan Tabel:

Tabel.html

	<HTML>
	<HEAD></HEAD>
	<BODY>
	<font face="arial narrow">
	<table border=1 cellspacing=0 cellpadding=2 bodercolor=”black”>
	<tr bgcolor="black">
	<th colspan=3>
	<font color="White">
	Harga Komoditas Beras <br>
	di Kota Surakarta
	</font>
	</th>
	</tr>
	<tr bgcolor="gray">
	<th width=150>
	<font color="White">Komoditas </font>
	</th>
	<th width=50>
	<font color="White">Satuan </font>
	</th>
	<th width=100>
	<font color="White">Harga </font>
	</th>
	</tr>
	<tr>    <td> Beras C4 Super</td>
	<td align="center"> 1 kg</td>
	<td align="right"> Rp. 4.600,- </td>
	</tr>
	<tr>    <td> Beras C4 Biasa</td>
	<td align="center"> 1 kg</td>
	<td align="right"> Rp. 4.400,- </td>
	</tr>
	<tr>    <td> Mentik Wangi</td>
	<td align="center"> 1 kg</td>
	<td align="right"> Rp. 4.500,- </td>
	</tr>
	</table>
	</font>
	</BODY>
	</HTML>

Hasilnya:

Baris no.14 s/d no.23 Baris no.6 s/d no.13 Harga Komoditas Beras di Kota Surakarta
Komoditas	Satuan	Baris no.24 s/d no.28 Harga
Beras C4 Super	1 kg	Baris no.29 s/d no.32 Rp. 4.600,-
Beras C4 Biasa	1 kg	Baris no.33 s/d no.36 Rp. 4.400,-
Mentik Wangi	1 kg	Rp. 4.500,-