Fungsi Tabel di blog

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web terbagi pada beberapa kolom atau baris.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :

<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

    * align – perataan : rata kiri (left), tengah (center) atau kanan (right).
    * bgcolor – warna latar belakang (background) dari tabel.
    * border – ukuran lebar border tabel (dalam pixel).
    * width – ukuran tabel dalam pixel atau percent.

Contoh :

<TABLE align=”center” bgcolor=”#0000FF” border=”2″  width=”50%”>

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

    * align – perataan : rata kiri (left), tengah (center) atau kanan (right).
    * bgcolor – warna latar belakang dari baris.
    * valign – perataan vertikal : top, middle atau bottom.

Contoh :

<TR align=”right” bgcolor=”#0000FF” valign=”top”>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

    * align – perataan
    * background – image yang digunakan sebagai latar belakang dari kolom.
    * bgcolor – warna latar belakang
    * colspan – menggabungkan kolom 1 dan 2/n menjadi satu kolom
    * height – ukuran tinggi cell dalam pixels.
    * rowspan – menggabungkan baris 1 dan 2/n menjadi satu baris
    * valign – perataan vertikal :top, middle atau bottom.
    * width – ukuran kolom dalam pixel atau percen

coba ketikkan kode berikut pada editor(notepad):

<table border=”6″ bgcolor=”black” width=”75%” height=”30%” align=”center”>
<tr BGCOLOR=”#ff0000″ align=”center”>
<td colspan=”3″><strong>KELUARGA SELAMAT</td>
</tr>
<tr BGCOLOR=”RED” align=”center”>
<td width=”25%”>SALAM</td>
<td width=”25%”>SALIM</td>
<td width=”25%”>SANTI</td>
</tr>
<tr BGCOLOR=”#ff0000″>
<td colspan=”3″ align=”center”><strong>KELUARGA CAHAYA</td>
<tr BGCOLOR=”RED” align=”center”>
<td>NARA</td>
<td>NURUL</td>
<td>NURI</td>
</tr>
</table>

sehingga tampilan yang anda dapatkan adalah sebagai berikut:
artikel ini di ambil dari blog ini