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

(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 yang digunakan untuk memban
2 komentar
Baca selengkapnya

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 tesebut. Terdapat dua model Motherboa
Posting Komentar
Baca selengkapnya

INTERKONEKSI ANTAR KOMPUTER

Interkoneksi antarkomponen adalah struktur dan mekanisme untuk menghubungkan tiga komponen (pemrosesan, memori utama dan perangkat masukan/keluaran). Disini saya akan sedikit membahas tentang tiga komponen yang saling terhubung tersebut.   1. Pemrosesan         Pemrosesan data (Inggris: data  processing ) adalah jenis pemrosesan yang dapat mengubah data menjadi informasi atau pengetahuan. Pemrosesan data ini sering menggunakan komputer sehingga bisa berjalan secara otomatis. Setelah diolah, data ini biasanya mempunyai nilai yang informatif jika dinyatakan dan dikemas secara terorganisir dan rapi, maka istilah pemrosesan data sering dikatakan sebagai sistem informasi. Kedua istilah ini mempunyai arti yang hampir sama, pemrosesan data mengolah dan memanipulasi data mentah menjadi informasi (hasil pengolahan), sedangkan sistem informasi memakai data sebagai bahan masukan dan menghasilkan informasi sebagai produk keluaran. 2. Memori Utama         Memori utama
Posting Komentar
Baca selengkapnya