Langsung ke konten utama

Format Tabel Halaman Web


Menerapkan elemen HTML table untuk layout halaman web



ELEMENT TABLE
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute sepertialign, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.

Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>

ELEMENT CAPTION 
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attributealign dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel).

Sintaks:
<caption  align="top"|"bottom">
..........................
</caption>

ELEMENT TR (Table Row)
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.

Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>

ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align,valign, bgcolor, colspan, rowspan

Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>

<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>


LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser

Contoh :
No.   Nama
1.      Adhitya Eka Prasetya
2.      Ayu Yusnawati
3.      Rizky Dwi Kurniawan
<html>
<head>
<title>Latihan4-1</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Adhitya Eka Prasetya</td>
</tr>
<tr> <td>2.</td>
<td>Ayu Yusnawati</td> 
</tr>
<tr> <td>3.</td>
<td>Rizky Dwi Kurniawan</td> 
</tr>
</table>
</body>
</html>

Cara mengganti Warna:
 background baris tabel menjadi baris-1=green baris-2=yellow baris-3=red baris-4=blue
<html>
<head>
<title>Latihan4-2</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Adhitya Eka Prasetya</td>
</tr>
<tr bgcolor="red"> <td>2.</td>
<td>Ayu Yusnawati</td> 
</tr>
<tr bgcolor="blue"> <td>3.</td>
<td>Rizky Dwi Kurniawan</td> 
</tr>
</table>
</body>
</html>




Latihan 3:
Buat tabel untuk teks di bawah ini:

Tabel 1.1
Data Siswa
No.    Nama
1.    Ayu Yusnawati
2.    Adhitya Eka Prasetya
3.    Rizky Dwi Kurniawan


Nama file: latihan4_3.html





<html>
<head>
<title>Latihan4-3</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Siswa</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ayu Yusnawati</td>
</tr>
<tr bgcolor="red"> <td>2.</td>
<td>Adhitya Eka Prasetya</td> 
</tr>
<tr bgcolor="blue"> <td>3.</td>
<td>Rizky Dwi Kurniawan</td> 
</tr>
</table>
</body>
</html>

Cara membuat table untuk layout websit :
     <html>
<body>

<table width = "500" border = "0">

<tr>

<td colspan = "2" style = "background-color:#00ffff;">

<h1>Judul Pada Halaman Web</h1>

</td>

</tr>

<tr>

<tr valign = "top"><td style = "background-color:#680000; width:100px; text-align:top;">

<b>Daftar Isi</b><br/>

HTML<br/>

XHTML<br/>

CSS<br/>

Java Script</td>

<td style = "background-color:#b0b0b0; height:200px; width:400px; text-align:top;">

Isi Artikel Sobat Disini</td>

</tr>

<tr>

<td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ LuckyArbian</td>

</tr>

</body>
</html>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

TATA LETAK KOMPONEN KOMPUTER

TATA LETAK KOMPONEN KOMPUTER 1.     MOTHERBOARD Motherboard juga dikenal dengan nama system board adalah sebuah papan yang berisi komponen-komponen yang terintegrasi dan membentuk sistem penghubung antar bagian pada komputer. Motherboard merupakan bagian komputer yang paling utama. Didalam motherboard terdapat berbagai banyak  soket dan slot konektor. Semua bagian komputer selalu terhubung ke motherboard. Motherboard sering disebut juga dengan Mainboar d dan disingkat(Mobo). FUNGSI  MOTHERBOARD Tugas  motherboard  pada PC adalah sebagai komponen circuit board utama yang menghubungkan banyak komponen lain. Lalu lintas data semuanya diatur oleh motherboard, Mulai dari CPU/processor, RAM, video card, peranti peyimpanan (harddisk, CD-ROM), peranti masukan data (keyboard, mouse, scanner), atau printer untuk mencetak dan seterusnya JENIS JENIS MOTHERBOARD Jenis motherboard ditentukan oleh tipe processor yang digunakan pada motherboard tese...
Posting Komentar
Baca selengkapnya

(PEMODELAN PERANGKAT LUNAK) MATERI PPL KELAS XI

1.  Konsep Dasar Pemodelan Perangkat Lunak      1. Apa itu perangkat lunak? Perangkat lunak merupakan program komputer yang berfungsi menghubungkan antara pengguna dan komputer yang digunakan.  dapat dibilang perangkat lunak merupakan sebagai media penerjemah perintah yang diberikan oleh pengguna kepada komputer untuk selanjutnya diproses melalui perangkat keras komputer tersebut.Perangkat lunak umumnya digunakan untuk mengontrol perangkat keras yang biasa disebut sebagai device driver, melakukan proses penghitungan, berinteraksi dengan perangkat lunak yang lebih mendasar lainnya, seperti sistem operasi dan bahasa pemrograman. Secara umum ada tiga jenis perangkat lunak yang diketahui hingga saat ini yaitu sistem operasi yang merupakan sebuah penghubung antara pengguna dari komputer dengan perangkat keras komputer. Kedua yaitu perangkat lunak bahasa pemrograman seperti java. Dan yang ketiga yaitu perangkat lunak aplikasi yang merupakan penrangkat yan...
2 komentar
Baca selengkapnya

(PEMROGRAMAN WEB DINAMIS) MATERI PEMROGRAMAN WEB DINAMIS KELAS XII

1. APLIKASI WEB STATEFULL 1. APLIKASI WEB STATEFULL    A. Pengertian      Adalah aplikasi web dimana informasi yang diberikan sebelumnya disimpan dan mempengaruhi konten/informasi/data yang akan diberikan setelahnya.    B. Ciri-CIri Session Menyimpan informasi tentang preferensi yang kita berikan, membuat suatu sesi yang unik untuk kita. Cookies Data yang menyimpan informasi. Cache Suatu mekanisme dimana web document seperti HTML dan gambar disimpan sementara untuk mengurangi pemakaian bandwitd dan mempercepat loading. 2. SESSION PADA SISI SERVER     A. Pengertian     Cara untuk menjaga suatu variable tetap ada selama sesi kunjungan user. Meskipun berpindah – pindah halaman, variable session tetap ada dan bisa diakses sampai session ditutup.     B. Cara Kerja Pengunjung mengakses web (memulai session). Pengunjung diberi pengenal berupa session id. Pengunjung melanjutkan session, mengiri...
Posting Komentar
Baca selengkapnya