Web3 ListTable

List
List HTML
 Ini yang pertama

 Ini yang kedua
 Ini yang ketiga
Unordered List
Unordered list adalah daftar item. Item list ditandai dengan bullet (umumnya lingkaran hitam
kecil).
Unordered list dimulai dengan tag <ul>. Setiap item list dimulai dengan tag <li>.
<ul>
<li>Kopi</li>
<li>Susu</li>
</ul>
Hasil di browser:
 Kopi
 Susu
Di dalam item list Anda dapat meletakkan paragraf, line break, image, link, list lain, dll.
Ordered List
Ordered list juga merupakan daftar item. Item list ditandai dengan bilangan.
Ordered list dimulai dengan tag <ol>. Setiap item list dimulai dengan tag <li>.
<ol>
<li>Kopi</li>
<li>Susu</li>
</ol>
Hasil di browser:
1. Kopi
2. Susu
Di dalam item list Anda dapat meletakkan paragraf, line break, image, link, list lain, dll.
Definition List
Definition list bukan merupakan daftar item. Ini adalah daftar istilah (term) dan penjelasan
dari istilah itu.
Definition list dimulai dengan tag <dl>. Setiap term definition-list dimulai dengan tag <dt>.
Setiap definisi dari definition-list dimulai dengan tag <dd>.
<dl>
<dt>Kopi</dt>
<dd>Minuman panas hitam</dd>
<dt>Susu</dt>
<dd>Minuman dingin putih </dd>
</dl>
Hasil di browser:
Kopi
Minuman panas hitam
Susu
Minuman dingin putih
Di dalam definisi dari definition-list (tag <dd>) Anda dapat meletakkan paragraf, line breaks,
image, link, list lainnya, dll.
Contoh
Beberapa tipe ordered list
<html>
<body>
<h4>List dengan bilangan:</h4>

<ol>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
<h4>List dengan huruf:</h4>

<ol type="A">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
<h4>List dengan huruf kecil:</h4>

<ol type="a">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
<h4>List dengan bilangan romawi:</h4>

<ol type="I">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
<h4>List dengan bilangan romawi kecil:</h4>

<ol type="i">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
</body>
</html>
Beberapa tipe unordered list
<html>
<body>
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
<h4>Square bullets list:</h4>

<ul type="square">
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
</body>
</html>
Nested list
<html>
<body>
<h4>Nested List:</h4>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>
Nested list 2
<html>
<body>
<h4>Nested List:</h4>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh Hijau
<ul>
<li>Cina</li>
<li>Afrika</li>
</ul>
</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>
Definition list.
<html>
<body>
<h4>Definition List:</h4>
<dl>
<dt>Kopi</dt>
<dd>Minuman panas hitam</dd>
<dt>Susu</dt>
<dd>Minuman dingin putih</dd>
</dl>
</body>
</html>
Tag List
Tag Description
<ol> Mendefinisikan ordered list
<ul> Mendefinisikan unordered list
<li> Mendefinisikan item list
<dl> Mendefinisikan definition list
<dt> Mendefinisikan term (istilah) definition
<dd> Mendefinisikan deskripsi
Tabel
HTML Tables
Apel 44%
Pisang 23%
Jeruk 13%
Lainnya 10%
Tabel didefinisikan dengan tag <table>.

Tabel dibagi kedalam baris (row) (dengan tag <tr>), dan setiap baris dibagi kedalam sel
(dengan tag <td>).
Huruf td berarti "table data," yang merupakan konten dari sel data.
Sel data dapat mencakup teks, image, list, paragraf, form, horizontal rule, tabel, dll.
<table border="1">
<tr>
<td>baris 1, sel 1</td>
</tr>
<tr>
</tr>
</table>
How it looks in a browser:
baris 1, sel 1 baris 1, sel 2

baris 2, sel 1 baris 2, sel 2
Tabel dan Atribut Border
Jika Anda tidak menentukan atribut border tabel akan ditampilkan tanpa border. Namun,
sering kali tabel diberi border.
Untuk menampilkan tabel dengan border, Anda harus menggunakan atribut border:
<table border="1">
<tr>
</tr>
</table>
Heading dalam Tabel
Heading dalam tabel didefinisikan dengan tag <th>.
<table border="1">
<tr>
<th>Heading</th>
<th>Heading lain</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Hasil di browser:
Sel kosong dalam Tabel
Sel tabel kadang tidak punya konten.
<table border="1">
<tr>
<th>Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Hasil di browser:
Catatan: Pada beberapa browser border pada sel kosong akan hilang.
Untuk menghindari ini, tambahkan non-breaking space ( ) ke sel data kosong, agar
border bisa tampak:
<table border="1">
<tr>
<th>Heading</th>
</tr>
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>
Hasil di browser:
Contoh
Tabel tanpa border
<html>
<body>
<h4>Tabel ini tanpa border:</h4>

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Dan tabel ini tanpa border:</h4>

<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Heading dalam tabel
<html>
<body>
<h4>Header Tabel:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Header Vertical:</h4>
<table border="1">
<tr>
<th>Nama:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telepon:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Sel kosong, gunakan " " untuk menangani sel tanpa konten.
<html>
<body>
<table border="1">
<tr>
<td>Sejumlah teks</td>
<td>Sejumlah teks</td>
</tr>
<tr>
<td></td>
<td>Beberapa teks</td>
</tr>
</table>
<p>
Seperti yang Anda lihat, sebuah sel tidak punya border. Hal ini
terjadi karena sel itu kosong. Cobalah Anda tambahkan spasi dalam
sel. Sel masih tidak punya border.
</p>
<p>
Triknya adalah menambahkan no-breaking space dalam sel.
</p>
<p>Non-breaking space adalah entitas karakter. Jika Anda tidak tahu

tentang entitas karakter, silahkan baca tentang itu.
</p>
<p>Entitas non-breaking space dimulai dengan ampersand ("&"),

kemudian huruf "nbsp", dan diakhiri dengan semicolon (";")
</p>
</body>
</html>
Tabel dengan caption
<html>
<body>
<h4>
Tabel ini punya caption, dan border tebal:
</h4>
<table border="6">
<caption>Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Sel tabel dengan span lebih dari satu baris/kolom
<html>
<body>
<h4>Sel dengan span dua kolom:</h4>

<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel dengan span dua baris:</h4>

<table border="1">
<tr>
<th>Nama:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Tag didalam tabel
<html>
<body>
<table border="1">
<tr>
<td>
<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah paragraf lainnya</p>
</td>
<td>Sel ini:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Sel ini mencakup list
<ul>
<li>apel</li>
<li>pisang</li>
<li>jeruk</li>
</ul>
</td>
<td>HALO</td>
</tr>
</table>
</body>
</html>
Cell padding, dipakai untuk menciptakan spasi antara konten sel dengan bordernya
<html>
<body>
<h4>Tanpa cellpadding:</h4>
<table border="1">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
</body>
</html>
Cell spacing, untuk menambah jarak antar sel
<html>
<body>
<h4>Tanpa cellspacing:</h4>
<table border="1">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
</body>
</html>
Menambah warna background atau image background ke tabel
<html>
<body>
<h4>Warna background:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Image Background:</h4>
<table border="1"
background="bgdesert.jpg">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
</body>
</html>
Menambahkan warna background atau image background ke sel tabel
<html>
<body>
<h4>Background sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Baris</td>
<td>Kedua</td>
</tr>
</table>
</body>
</html>
Perataan konten di dalam sel tabel
<html>
<body>
<table width="400" border="1">

<tr>
<th align="left">Pengeluaran untuk....</th>
<th align="right">Januari</th>
<th align="right">Februari</th>
</tr>
<tr>
<td align="left">Pakaian</td>
<td align="right">Rp.510000</td>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Makanan</td>
</tr>
<tr>
<th align="left">Jumlah</th>
<th align="right">Rp.1140000</th>
<th align="right">Rp.1615000</th>
</tr>
</table>
</body>
</html>
Atribut frame
<html>
<body>
<p>
Jika Anda tidak melihat bingkai di sekitar tabel, berarti browser
tidak mendukung.
</p>
<h4>Dengan frame="border":</h4>
<table frame="border">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="box":</h4>
<table frame="box">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="void":</h4>
<table frame="void">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="above":</h4>
<table frame="above">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="below":</h4>
<table frame="below">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<h4>Dengan frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
</body>
</html>
Atribut frame dan border
<html>
<body>
<p>
Jika Anda tidak melihat bingkai di sekitar tabel, berarti browser
tidak mendukung.
</p>
<table frame="hsides" border="3">

<tr>
<td>Baris pertama</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>Baris pertama</td>
</tr>
</table>
</body>
</html>
Tag Table
Tag Deskripsi
<table> Mendefinisikan tabel
<th> Mendefinisikan header tabel
<tr> Mendefinisikan baris tabel
<td> Mendefinisikan sel tabel
<caption> Mendefinisikan caption tabel
<colgroup> Mendefinisikan kelompok dari kolom tabel
<col> Mendefinisikan nilai atribut satu atau lebih kolom dalam tabel
<thead> Mendefinisikan head tabel
<tbody> Mendefinisikan body tabel
<tfoot> Mendefinisikan footer tabel

Web3 ListTable

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web3 ListTable

Diunggah oleh

Hak Cipta:

Format Tersedia

List

 Ini yang pertama

Beberapa tipe ordered list

<h4>List dengan bilangan:</h4>

<h4>List dengan huruf:</h4>

<h4>List dengan huruf kecil:</h4>

<h4>List dengan bilangan romawi:</h4>

<h4>List dengan bilangan romawi kecil:</h4>

Beberapa tipe unordered list

<h4>Disc bullets list:</h4>

<h4>Circle bullets list:</h4>

<h4>Square bullets list:</h4>

Tabel didefinisikan dengan tag <table>.

How it looks in a browser:

baris 1, sel 1 baris 1, sel 2

Tabel dan Atribut Border

Heading dalam Tabel

Heading dalam tabel didefinisikan dengan tag <th>.

Sel tabel kadang tidak punya konten.

Tabel tanpa border

<h4>Tabel ini tanpa border:</h4>

<h4>Dan tabel ini tanpa border:</h4>

Heading dalam tabel

Sel kosong, gunakan "&nbsp;" untuk menangani sel tanpa konten.

<p>Non-breaking space adalah entitas karakter. Jika Anda tidak tahu

<p>Entitas non-breaking space dimulai dengan ampersand ("&"),

Tabel dengan caption

Sel tabel dengan span lebih dari satu baris/kolom

<h4>Sel dengan span dua kolom:</h4>

<h4>Sel dengan span dua baris:</h4>

Tag didalam tabel

Cell spacing, untuk menambah jarak antar sel

Menambah warna background atau image background ke tabel

Menambahkan warna background atau image background ke sel tabel

Perataan konten di dalam sel tabel

<table width="400" border="1">

<table frame="hsides" border="3">

Anda mungkin juga menyukai

Sel kosong, gunakan " " untuk menangani sel tanpa konten.