PRAKTIKUM : CSS Tabel

NAMA : ___________________________________
KELAS : ___________________________________
TANGGAL PRAKTIKUM : ___________________________________

A. TUJUAN
Siswa dapat mengenal, memahami serta dapat melakukan pengaturan tabel menggunakan
CSS

B. PENDAHULUAN
Tabel telah lama kita kenal sebagai tag yang dipergunakan untuk membuat layout sebuah
Web. Karena kemudahannya, penggunaan tabel lebih disukai untuk membuat layout situs
menggunakan WYSIWYG Editor seperti Dreamweaver atau Frontpage.

Fakta Menggunakan Tabel:

1) Lebih mudah untuk digunakan dibandingkan dengan CSS Layout
2) Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti
Dreamweaver atau Frontpage
3) Tabel dapat “rusak” dalam beberapa browser yang biasa kita gunakan, yang menyebabkan
disfungsi dalam layout.
4) Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.

Kini, tabel telah digunakan pada banyak halaman Web yang online di internet, yaitu sekitar
95% menggunakan tabel untuk layouting. Biasanya, kita mendapati tabel pada situs-situs dengan
konten yang “berat” seperti situs Portal, atau pada situs yang lebih sederhana seperti pada situs-
situs perusahaan korporat atau pendidikan.

Dari sekian banyak isu dari penggunaan tabel, yang paling “mengancam” adalah mengenai
kompabilitas browser baik itu bagi pengguna mapun bagi developer Web. Dari sekian banyak
browser yang beredar diantaranya adalah Internet Explorer, Netscape, Mozilla, dan Opera yang
memiliki cara kerja yang berbeda. Hal ini berarti pengetesan harus dilakukan untuk mengetes
kompabilitas desain pada browser-browser tersebut. Selain itu, menggunakan tabel untuk layout
biasanya menggunakan editor WYSIWYG yang biasanya menghasilkan tag-tag yang tidak perlu
dipergunakan yang akhirnya meningkatkan besar File. Cara membaca tabel setiap browser
berbeda-beda, pada browser-browser seperti Netscape dan IE akan menampilkan isi tabel
dihalaman Web begitu ditemukan tag penutup dari tabel. Hal ini tentu akan terkesan bahwa situs
terasa lambat dan berat.

C. DASAR TEORI
1. Table Borders
Properti border digunakan untuk menentukan batas tabel dalam CSS.
Contoh:
table,td{
border: 1px solid blue;
}
 Perhatikan contoh diatas, tabel memiliki garis ganda. Untuk menampilkan garis tidak
ganda, gunakan properti border-collapse.

2. Border Collapse
Berikut adalah value yang dapat digunakan pada property ini:
Property Values
border-collapse collapse
seperate
none

Berikut adalah contoh penerapan:

table{
border-collapse:collapse;
}

table,td{
border: 1px solid blue;
}

3. Border Spacing
Property border-spacing digunakan untuk menetapkan jarak antar cell pada tabel, border-
spacing dapat memiliki sebuah nilai, sebagai contoh border-spacing:5px; dimana jarak
spasi 5px akan berlaku untuk semua sisi. Atau juga dapat berisi dua buah nilai, misalnya
border-spacing:5px 10px; yang akan menetapkan nilai pertama sebagai jarak spasi
horizontal dan nilai kedua sebagai jarak spasi vertikal.
table {
border-spacing:20px;
}

2
4. Lebar dan Tinggi Tabel
Lebar dan tinggi tabel didefinisikan dengan properti width dan height. Contoh dibawah ini,
lebar tabel 45% dan tinggi th 50px :
table{
width:45%;
}

th{
height:60px;
color:#3399CC;
}

table,th,td{
border: 3px solid #000000;
}

5. Perataan Teks Tabel

Properti text-align pada tabel mengatur perataan teks secara horizontal, seperti left, right,
atau center :
td.kanan{
text-align:right;
font-style:italic;
color:purple;
}

Properti vertical-align pada tabel mengatur perataan teks secara vertikal, seperti top,
bottom, atau middle :
td {
height:50px;
vertical-align:bottom;
}

3
6. Tabel Padding
Untuk memberi ruang antara batas border dengan konten dalam sebuah tabel, gunakan
properti padding pada elemen th dan td :
td {
padding:10px;
color:purple;
font-weight:bold;
}

7. Warna Tabel
Untuk lebih menarik, tabel diberi warna pada border, background, atau teks :
table, td, th {
border:3px solid purple;
}

th {
background-color:purple;
color:white;
font-style:italic;
}

4
Pada table berikut ditampilkan attribut formatting yang digunakan pada Tabel HTML dan
padanan CSSnya:

5
D. PRAKTIKUM
Ketentuan Praktikum:
1. Ketik dokumen halaman web pada Notepad
2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.

1. CSS Table Borders

<html>
<head><title>Table Borders</title>
<style type="text/css">
table {
background-color:#FFFFFF;
width:50%;
border-collapse:collapse;
}

/* td default */
td {
background-color:#FFFFFF;
border:1px solid black;
padding:5px;
}

/* td dengan border berwarna merah */

td.Merah {
background-color:#CC0000;
border:2px solid red;
padding:20px;
}

/* td dengan border berwarna biru */

td.Biru {
background-color:#3399FF;
border:2px solid blue;
padding:40px;
}

</style>
</head>
<body>

<h2>The Default table</h2>

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

6
 <h2>Table dengan border merah</h2>
<table>
<tr>
<td class="Merah">Cell 1</td>
<td class="Merah">Cell 2</td>
</tr>
<tr>
<td class="Merah">Cell 3</td>
<td class="Merah">Cell 4</td>
</tr>
</table>

<h2>Table dengan border biru</h2>

<table>
<tr>
<td class="Biru">Cell 1</td>
<td class="Biru">Cell 2</td>
</tr>
<tr>
<td class="Biru">Cell 3</td>
<td class="Biru">Cell 4</td>
</tr>
</table>
</body>
</html>

2. Border Collapse
<html>
<head>
<title>Border Collapse</title>
<style type="text/css">

table{
border-collapse:collapse;
font-family:verdana;
font-size:8px;
width:50%;

caption{
font-size:9px;
font-style:italic;
font-weight:bold;
text-align:right;

table,th,td{
border:1px solid #9999FF;

7
th,td{
height:25px;
padding-left:5px;
text-align:left;
}

th{
background-color:#0066AA;
color:white;

td.blue{
background-color:#0088AA;
}

</style>
</head>

<body>
<table>
<caption>Table 1: Power Mac G5 tech specs</caption>
<tr>
<th>CONFIGURATION</th>
<th>DUAL 1.8GHZ</th>
<th>DUAL 2GHZ</th>
<th>DUAL 2.5GHZ</th>
</tr>
<tr>
<td>MODEL</td>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<td class="blue">G5 Processor</td>
<td class="blue">Dual 1.8GHz PowerPC G5</td>
<td class="blue">Dual 2GHz PowerPC G5</td>
<td class="blue">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<td>Frontside bus</td>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<td class="blue">Level2 Cache</td>
<td class="blue">512K per processor</td>
<td class="blue">512K per processor</td>
<td class="blue">512K per processor</td>
</tr>
</table>
</body>
</html>

8
3. Border Spacing
<html>
<head>
<title>Border Spacing</title>
<style type="text/css">
table,td{
border:5px solid black;
}

#spacing-0 {
border-spacing:0px;
}

#spacing-10 {
border-spacing:10px;
}

#spacing-40 {
border-spacing:40px;
}

td {
padding:20px;
}

caption {
font-weight:bold;
}
</style>
<title>Border Spacing</title>
</head>

<body>
<table id="spacing-0">
<caption>border-spacing: 0px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<hr/>
<table id="spacing-10">
<caption>border-spacing: 10px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<hr/>
<table id="spacing-40">
<caption>border-spacing: 20px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
9
4. Perataan Teks Tabel
<html>
<head>
<style type="text/css">
table{
width:45%;
font-family:verdana;
font-size:11px;
border-collapse:collapse;
}

table,th,td{
border: 3px solid #000000;
}

th{
height:40px;
background-color:#009900;
color:#FFFF99;
}

td.kanan{
text-align:right;
font-style:italic;
}

td.tengah{
text-align:center;
}
</style>
</head>

<body>
<table>
<tr>
<th>NO</th>
<th>JUDUL BUKU</th>
<th width="14%">HARGA</th>
</tr>
<tr>
<td class="tengah">1.</td>
<td>Mahir menggunakan Ms.Word 2007</td>
<td class="kanan">Rp. 29.500</td>
</tr>
<tr>
<td class="tengah">2.</td>
<td>Cascading Style Sheet</td>
<td class="kanan">Rp. 35.000</td>
</tr>
<tr>
<td class="tengah">2.</td>
<td>JavaScript untuk Pemula</td>
<td class="kanan">Rp. 25.000</td>
</tr>
</table>
</body>
</html>

10
5. Web Page Layout menggunakan table dan CSS

Header

Navigation Content

Bottom Navigation

<html>
<head>
<title> Web Page Layout menggunakan table dan CSS</title>
<style type="text/css">

#main
{
width: 720px;
border-collapse: collapse;
border: solid #000000 1px;
}

#header
{
height:110px;
width: 120px;
background-color:#99CC00;
color:#FFFFFF;
font-family:verdana;
font-size:25px;
font-style:italic;
}

#content
{
font-family: Verdana,Arial,Sans-serif;
font-size: 10pt ;
padding-left:10px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
}

11
 #navigation
{
width: 160px;
height:500px;
text-align: center;
border: solid 1px red;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt ;
line-height: 22px;
font-weight: bold;
background-color:#990000;
}

#footer{
text-align: center;
background-color:#000000;
color:#FFFF66;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt ;
height:30px;
}
</style>
</head>

<body>
<table id= "main" align="center">
<tr>
<td id="header" colspan="2" >Header</td>
</tr>
<tr>
<td id="navigation">Navigation</td>
<td id="content">Content</td>
</tr>
<tr>
<td colspan="2" id="footer">Bottom Navigation</td>
</tr>
</table>
</body>
</html>

E. LATIHAN
Rancanglah sebuah layout Web Page menggunakan table css, kemudian isi konten web
tersebut dengan kreasi Anda.

F. KESIMPULAN

12