Mega Aulia
Resha Purnama
Pada kesempatan kali ini kita akan membuat tampilan HTML sederhana menggunakan tabel di Adobe Dreamweaver CS6. Tampilannya seperti dibawah ini:
Dan berikut adalah langkah-langkahnya.
1. Pertama buka Adobe Dreamweaver CS6 di PC.
2. Kemudian akan muncul tampilan seperti berikut.
3. Pilih HTML pada page type lalu klik Create. Dan kemudian akan muncul tampilan seperti berikut.
3. Kemudian kita masukan tabel dengan menggunakan fitur pada Adobe Dreamweaver CS6 dengan mengklik Insert > Table , atau bisa menggunakan ShortCut CTRL + ALT + T. Dan muncul tampilan seperti gambar dibawah ini.
kita akan membuat table dengan 5 baris dan 5 kolom, isikan masing-masing 5 pada Rows dan Columns, lalu klik OK, setelah itu akan muncul tampilan sebagai berikut.
Pada layout HTML yang akan kita buat, kita akan menggabungkan beberapa sel kolom dan baris. Dalam Source Code HTML dikenal dengan sebutan Colspan dan Rowspan. Kemudian kita akan menggabungkan 3 sel di baris pertama yaitu di kolom 1, 2 dan 3.
Source Code:
<tr>
<td height="40" colspan="3"></td>
<th scope="col"></th>
<td scope="col"></td>
</tr>
Output:
| 6. Pada baris ke dua, kita akan menggabungkan kolom satu sampai kolom empat. |
Source Code:
<tr>
<td colspan="4"></td>
<td></td>
</tr>
Output:
7. Pada Baris Ke 3, kita akan menggabungkan kolom 2, 3 dan 4.
Source Code:
<tr>
<td> </td>
<td colspan="3"></td>
<td></td>
</tr>
Output:
8. Pada baris ke-4 kita tidak perlu menggabungkan beberapa kolom, namun kita akan menggabungkan semua kolom di baris ke lima.
Source Code:
<tr>
<td colspan="5"></td>
</tr>
Output:
9. Setelah sesi penggabungan kolom selesai, selanjutnya kita akan menggabungkan baris ke 1, 2 dan 3 di kolom 5.
Source Code:
<table width="650" height="424" border="1">
<tr>
<td height="40" colspan="3">Logo</td>
<th scope="col"></th>
<td rowspan="3"> </td>
</tr>
<tr>
<td height="36" colspan="4">MENU NAVIGASI</td>
(td/kolom ke 5 dihapus)
</tr>
<tr>
<td></td>
<td colspan="3"></td>
(td/kolom ke 5 dihapus)
</tr>
Output:
10. Terakhir kita akan menggabungkan baris ke -3 dan ke-4 di kolom 1.
Source Code:
<tr>
<td rowspan="2"></td>
<td height="173" colspan="3"></td>
</tr>
<tr>
(td/kolom pertama dihapus)
<td height="92"> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
</table>
Output:
11. Tampilan selesai, dan berikut hasilnya.
Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="650" height="424" border="1">
<tr>
<td height="40" colspan="3">Logo</td>
<th scope="col">Search</th>
<td rowspan="3">Recent Post</td>
</tr>
<tr>
<td height="36" colspan="4">MENU NAVIGASI</td>
</tr>
<tr>
<td rowspan="2">Feature</td>
<td height="173" colspan="3">Big Featur</td>
</tr>
<tr>
<td height="92">Small Feature</td>
<td>Small Feature</td>
<td>Small Feature</td>
<td>News</td>
</tr>
<tr>
<td colspan="5">CopyRight 2009</td>
</tr>
</table>
</body>
Output: