Skip to main content

HTML Tables

HTML Tables

Contoh Tabel  HTML :
CompanyContactCountry
FajarYusuf.ComFajar M. YusufIndonesia
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Mendefinisikan Table HTML

Tabel HTML didefinisikan dengan tag <table> .

Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header tabel didefinisikan dengan tag <th>. Secara default, judul tabel akan tebal dan posisi ditengah. Sebuah data / sel tabel didefinisikan dengan tag <td>.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Kamu bisa mencoba disini, Hasil :
Mendefinisikan Table HTML
klik gambar untuk memperbesar

Catatan: <td> adalah elemen untuk wadah data tabel.
Mereka dapat berisi segala macam elemen HTML, termasuk teks, gambar, daftar, tabel lain, dll


HTML Table - Menambahkan Border atau Garis Tepi

Jika kamu tidak menentukan border untuk sebuah table, maka table akan ditampilkan tanpa border.

Sebuah border diatur dengan menggunakan CSS border properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Gunakan properti border CSS untuk menambahkan border ke tabel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Border atau Garis Tepi
klik gambar untuk memperbesar


Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.

HTML Table - Borders Runtuh Satu Garis

Jika kamu ingin border runtuh ke dalam satu border, tambahkan CSS border-collapse properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>Jika kamu ingin border menjadi satu border satu garis solid, tambahkan properti CSS border-collapse.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Borders Runtuh Satu Garis
klik gambar untuk memperbesar

HTML Table - Menambahkan Sel Padding

Sel Padding menentukan ruang antara isi sel dan border.

Jika kamu tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan CSS padding properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Padding sel menentukan ruang antara konten sel dan batasnya.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Sel Padding
klik gambar untuk memperbesar


HTML Table - Judul Tabel Rata Kiri

Secara default, judul tabel akan menjadi tebal dan rata tengah.

Untuk membuat rata kiri untuk judul tabel, gunakan CSS text-align properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Judul Tabel Rata Kiri
klik gambar untuk memperbesar


HTML Table - Menambahkan Spasi Border

Spasi perbatasan menentukan ruang antara sel-sel.

Untuk mengatur jarak perbatasan untuk tabel, gunakan CSS border-spacing properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies menentukan ruang antara sel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Spasi Border
klik gambar untuk memperbesar

Catatan: Jika tabel telah menggunakan border-collapse, border-spacing tidak akan berpengaruh.

HTML Table - Sel Span Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan colspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Sel yang menggabungkan dua kolom </h2>
<p>Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan. </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Good</td>
    <td>55577884</td>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Sel Span Banyak Kolom
klik gambar untuk memperbesar

HTML Table - Sel Span Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan rowspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Good</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577884</td>
  </tr>
  <tr>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Sel Span Banyak Baris
klik gambar untuk memperbesar

HTML Table - Menambahkan Caption

Untuk menambahkan keterangan pada tabel, gunakan tag <caption>:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>Untuk menambahkan judul ke tabel, gunakan tag caption.</p>

<table style="width:100%">
  <caption>Saldo Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>January</td>
    <td>Rp.100.000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>Rp.500.000</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Caption
klik gambar untuk memperbesar

Catatan: Tag <caption> harus dimasukkan segera setelah tag <table>.

Sebuah Gaya Khusus untuk Table

Untuk menentukan gaya khusus untuk tabel khusus, menambahkan id atribut ke table :

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
Sebuah Gaya Khusus untuk Table
klik gambar untuk memperbesar


Ringkasan

Gunakan HTML elemen <table> untuk mendefinisikan tabel
Gunakan HTML elemen <tr> untuk menentukan baris tabel
Gunakan HTML elemen <td> untuk mendefinisikan tabel data
Gunakan HTML elemen <th> untuk menentukan meja pos
Gunakan HTML elemen <caption> untuk mendefinisikan judul tabel
Gunakan CSS border properti untuk menentukan garis tepi
Gunakan CSS border-collapse properti untuk runtuh garis tepi
Gunakan CSS padding properti untuk menambahkan padding untuk sel
Gunakan CSS text-align properti untuk menyelaraskan teks sel
Gunakan CSS border-spacing properti untuk mengatur jarak antara sel-sel
Gunakan colspan atribut untuk membuat rentang sel banyak kolom
Gunakan rowspan atribut untuk membuat rentang sel banyak baris
Gunakan id atribut untuk mendefinisikan unik satu tabel
Labels:

Comments

Post a Comment

Popular posts from this blog

Menambahkan Peraturan Komentar Pada Blog

Menambahkan Peraturan Komentar Pada Blog : Ngblog Menulis sebuah artikel dan dikomentari dengan link aktif/promosi produk dan kata kata spam lainnya memang tidak mengenakan anda mungkin akan sangat merasa kecewa sekali, anda mungkin seperti menulis sebuah artikel namun tidak dihargai karyanya oleh orang lain. Mungkin membuat aturan berkomentar di blog adalah salah 1 cara menetralisirnya, mungkin jika ada aturan tersebut orang berpikir 2 kali untuk meninggalkan komentar Spam, lalu bagaimana cara membuat aturan komentar tersebut? langsung saja kita praktekan Ikuti langkah berikut : Login ke bloger,masuk ke blog yang anda inginkan, Klik Setelan -> POS-KOMENTAR   Scroll kebawah dan cari menu "pesan formulir komentar" klik tambahkan , dan isi kolom sesuai keinginan kalian atau peraturan yang kalian inginkan.  Setelah selesai silakan klik simpan setelan dipojok kanan atas. Lihat hasilnya di blog kalian ,akan seperti ini : Jika ada pertanyaan...
21 comments
Baca Lebih »

Traha Infinity a lancé une campagne événementielle de pré-inscription

Moai Games a officiellement annoncé la sortie d’ un  nouveau  MMORPG  intitulé  Traha Infinity , dans la première moitié de 2022. Ce jeu mobile devrait se dérouler 200 ans avant les événements des précédents jeux  Traha , il a  des  graphismes  Full 3D  et optimisés performances haut de gamme pour smartphones. Traha a  été un énorme succès en Corée avec 4,2 millions de précommandes avant sa sortie officielle en 2019, le jeu mobile n’a jamais eu de sortie mondiale. Ce jeu a été développé par Moai Games et publié par  Nexon , et est devenu l’un des jeux les plus vendus de l’époque. Et maintenant,  Traha Infinity  continuera le même monde comme une suite, plutôt une préquelle. Le nouveau jeu présentera la même vision du monde et la même topographie que le jeu précédent, mais présentera un nouveau scénario. Ils se vantent d’ une qualité graphique  Full 3D haut  de gamme ainsi que d’un système optimisé pour les smartphones. Les joueurs pourront explorer l...
Post a Comment
Baca Lebih »

Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner.

Hai Pembaca FajarYusuf.Com yang pintar dan berwawasan tinggi, kali ini FajarYusuf.Com akan post Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner . Mari kita membuat program konversi bilangan yang sangat mudah di buat dengan menggunakan bahasa pemrograman C++. Yaitu dengan menggunakan type data long, untuk Hexadesimal dengan rumus : <<hex<<desimal (merubah dari bilangan Desimal ke Hexadesimal) , untuk Oktal dengan rumus : <<oct<<desimal (merubah dari bilangan Desimal ke Oktal). Dan untuk biner dilakukan pembagian 2. Contoh Coding Program C++ Konversi Bilangan: #include<iostream> using namespace std; int main() { long desimal, pembagi=1073741824, bit; cout<<"Nilai Desimal : "; cin>>desimal; cout<<"Hexadesimal = "<<hex<<desimal<<endl; cout<<"Oktal = "<<oct<<desimal<<endl; ...
Post a Comment
Baca Lebih »