Bagaimana kita membuat tabel dengan menggunakan html?

Question

tag. To add a table header, we will need to use the

Tabel HTML memungkinkan Anda mengatur data menjadi baris dan kolom. Mereka biasanya digunakan untuk menampilkan data tabular seperti daftar produk, detail pelanggan, laporan keuangan, dan sebagainya

Table of Contents Show

Mencakup Beberapa Baris dan Kolom
Bagaimana cara membuat tabel dalam HTML dengan contoh?
Bagaimana tabel dasar dibuat menggunakan HTML?
Bagaimana cara membuat tabel dengan baris dan kolom dalam HTML?
Bagaimana cara membuat daftar isi dalam HTML?

Anda dapat membuat tabel menggunakan properti element. Inside theelement, you can use the elements to create rows, and to create columns inside a row you can use the element can be placed either before or after the and elements, but must appear after any , and elements.

Tip: Do not use tables for creating web page layouts. Table layouts are slower at rendering, and very difficult to maintain. It should be used only to display tabular data.

elements. You can also define a cell as a header for a group of table cells using theelement.The following example demonstrates the most basic structure of a table.
________0
Tables do not have any borders by default. You can use the CSS border untuk menambahkan batas pada tabel. Selain itu, sel tabel berukuran cukup besar agar sesuai dengan konten secara default. Untuk menambahkan lebih banyak ruang di sekitar konten dalam sel tabel, Anda dapat menggunakan properti CSS padding
Aturan gaya berikut menambahkan batas 1 piksel ke tabel dan pengisi 10 piksel ke selnya
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
Secara default, batas di sekitar tabel dan selnya dipisahkan satu sama lain. Namun Anda dapat menciutkannya menjadi satu dengan menggunakan properti border-collapse pada properti 
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
0
Aturan gaya berikut menciutkan batas tabel dan meratakan teks header tabel ke kiri
table {
    border-collapse: collapse;
}
th {
    text-align: left;
}
Silakan lihat tutorial tentang tabel CSS untuk mempelajari tentang menata tabel HTML secara mendetail
Catatan. Sebagian besar 
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
1, table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
2, table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
3, table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
4, table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
5, dll. untuk tampilan tabel gaya di versi sebelumnya telah dihapus di HTML5, jadi hindari menggunakannya. Gunakan CSS untuk menata tabel HTML sebagai gantinya
Mencakup Beberapa Baris dan Kolom
Spanning memungkinkan Anda memperluas baris dan kolom tabel di beberapa baris dan kolom lainnya
Biasanya, sel tabel tidak dapat melewati ruang di bawah atau di atas sel tabel lainnya. Namun, Anda dapat menggunakan atribut 
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
_6 atau table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
7 untuk menjangkau beberapa baris atau kolom dalam tabel
Mari kita coba contoh berikut untuk memahami bagaimana 
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
7 pada dasarnya bekerja
NamaTeleponJohn Carter55501925550152
Demikian pula, Anda dapat menggunakan atribut 
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
_6 untuk membuat sel yang membentang lebih dari satu baris. Mari kita coba contoh untuk memahami cara kerja spanning baris
 Artikel ini membantu Anda memulai dengan tabel HTML, mencakup hal-hal dasar seperti baris, sel, judul, membuat sel merentang beberapa kolom dan baris, dan cara mengelompokkan semua sel dalam kolom untuk tujuan penataan
Prerequisites:The basics of HTML (see Introduction to HTML).Objective:To gain basic familiarity with HTML tables.
Tabel adalah kumpulan data terstruktur yang terdiri dari baris dan kolom (data tabular). Tabel memungkinkan Anda mencari nilai dengan cepat dan mudah yang menunjukkan semacam koneksi antara berbagai jenis data, misalnya seseorang dan usianya, atau hari dalam seminggu, atau jadwal untuk kolam renang lokal
Tabel sangat umum digunakan dalam masyarakat manusia, dan sudah sejak lama, terbukti dengan dokumen Sensus AS ini dari tahun 1800
Oleh karena itu, tidak heran jika pembuat HTML menyediakan sarana untuk menyusun dan menyajikan data tabular di web
Inti dari sebuah meja adalah kaku. Informasi mudah ditafsirkan dengan membuat asosiasi visual antara header baris dan kolom. Lihat tabel di bawah sebagai contoh dan temukan raksasa gas Jovian dengan 62 bulan. Anda dapat menemukan jawabannya dengan mengaitkan tajuk baris dan kolom yang relevan
<table>
  <caption>
    Data about the planets of our solar system (Planetary facts taken from
    <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <td>
        Declassified as a planet in 2006, but this
        <a href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.
      </td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
Ketika diimplementasikan dengan benar, tabel HTML ditangani dengan baik oleh alat aksesibilitas seperti pembaca layar, sehingga tabel HTML yang berhasil akan meningkatkan pengalaman pengguna yang dapat melihat maupun yang memiliki gangguan penglihatan.
Anda juga dapat melihat contoh langsung di GitHub. Satu hal yang akan Anda perhatikan adalah bahwa tabel terlihat sedikit lebih mudah dibaca di sana — ini karena tabel yang Anda lihat di atas pada halaman ini memiliki gaya minimal, sedangkan versi GitHub menerapkan CSS yang lebih signifikan
Jangan berada di bawah ilusi; . Dalam modul ini kita berfokus pada bagian HTML; 
Kami tidak akan fokus pada CSS dalam modul ini, tetapi kami telah menyediakan lembar gaya CSS minimal untuk Anda gunakan yang akan membuat tabel Anda lebih mudah dibaca daripada default yang Anda dapatkan tanpa gaya apa pun. Anda dapat menemukan stylesheet di sini, dan Anda juga dapat menemukan template HTML yang menerapkan stylesheet — ini bersama-sama akan memberi Anda titik awal yang baik untuk bereksperimen dengan tabel HTML
Tabel HTML harus digunakan untuk data tabular — untuk itulah mereka dirancang. Sayangnya, banyak orang menggunakan tabel HTML untuk menata halaman web, mis. g. satu baris berisi header, satu baris berisi kolom konten, satu baris berisi footer, dll. Anda dapat menemukan detail selengkapnya dan contoh di Modul Pembelajaran Aksesibilitas kami. Ini biasanya digunakan karena dukungan CSS di seluruh browser dulu sangat buruk; 
Singkatnya, menggunakan tabel untuk tata letak daripada teknik tata letak CSS adalah ide yang buruk. Alasan utamanya adalah sebagai berikut
Tabel tata letak mengurangi aksesibilitas bagi pengguna tunanetra. , digunakan oleh penyandang tuna netra, menafsirkan tag yang ada di halaman HTML dan membacakan isinya kepada pengguna. Karena tabel bukanlah alat yang tepat untuk tata letak, dan markupnya lebih kompleks dibandingkan dengan teknik tata letak CSS, keluaran pembaca layar akan membingungkan penggunanya
Tabel menghasilkan sup tag. Seperti disebutkan di atas, tata letak tabel umumnya melibatkan struktur markup yang lebih kompleks daripada teknik tata letak yang tepat. Hal ini dapat menyebabkan kode menjadi lebih sulit untuk ditulis, dipelihara, dan di-debug
Tabel tidak secara otomatis responsif. Saat Anda menggunakan wadah tata letak yang tepat (seperti table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
5, table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
_6, table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
7, atau table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
8), lebarnya secara default adalah 100% dari elemen induknya. Tabel di sisi lain berukuran sesuai dengan kontennya secara default, sehingga tindakan ekstra diperlukan untuk mendapatkan gaya tata letak tabel agar berfungsi secara efektif di berbagai perangkat
Kita sudah cukup membahas teori tabel, jadi, mari selami contoh praktis dan buat tabel sederhana
Pertama-tama, buatlah salinan lokal dari blank-template. html dan tabel minimal. css di direktori baru di mesin lokal Anda
Isi setiap tabel diapit oleh dua tag ini. table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
_9. Tambahkan ini di dalam tubuh HTML Anda
Wadah terkecil di dalam tabel adalah sel tabel, yang dibuat oleh elemen <td>Hi, I'm your first cell.</td>
0 ('td' singkatan dari 'table data'). Tambahkan yang berikut di dalam tag tabel Anda
<td>Hi, I'm your first cell.</td>
Jika kita menginginkan deretan empat sel, kita perlu menyalin tag ini tiga kali. Perbarui isi tabel Anda agar terlihat seperti itu
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
Seperti yang akan Anda lihat, sel-sel tidak diletakkan di bawah satu sama lain, melainkan secara otomatis disejajarkan satu sama lain pada baris yang sama. Setiap elemen 
<td>Hi, I'm your first cell.</td>
_0 membuat satu sel dan bersama-sama membentuk baris pertama. Setiap sel yang kita tambahkan membuat baris bertambah panjang
Untuk menghentikan pertumbuhan baris ini dan mulai menempatkan sel berikutnya pada baris kedua, kita perlu menggunakan elemen 
<td>Hi, I'm your first cell.</td>
2 ('tr' adalah singkatan dari 'baris tabel'). Mari selidiki ini sekarang
Tempatkan empat sel yang telah Anda buat di dalam <td>Hi, I'm your first cell.</td>
2 tag, seperti itu
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
Sekarang Anda telah membuat satu baris, coba buat satu atau dua lagi — setiap baris perlu dibungkus dengan elemen <td>Hi, I'm your first cell.</td>
2 tambahan, dengan setiap sel dimuat dalam <td>Hi, I'm your first cell.</td>
0
Ini akan menghasilkan tabel yang terlihat seperti berikut ini
<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
Catatan. Anda juga dapat menemukan ini di GitHub sebagai tabel sederhana. html (lihat juga langsung)
Sekarang mari kita mengalihkan perhatian kita ke tajuk tabel — sel khusus yang berada di awal baris atau kolom dan menentukan jenis data yang berisi baris atau kolom (sebagai contoh, lihat sel "Orang" dan "Usia" di bagian pertama . Untuk mengilustrasikan mengapa mereka berguna, lihat contoh tabel berikut. Pertama kode sumber
<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
Sekarang tabel yang dirender sebenarnya
Masalahnya di sini adalah, meskipun Anda bisa mengetahui apa yang terjadi, tidak semudah itu untuk menyilangkan data referensi. Jika judul kolom dan baris menonjol, itu akan jauh lebih baik
Mari kita coba memperbaiki tabel ini
Pertama, buat salinan lokal dari tabel anjing kami. html dan tabel minimal. file css di direktori baru di mesin lokal Anda. HTML berisi contoh Anjing yang sama seperti yang Anda lihat di atas
Untuk mengenali tajuk tabel sebagai tajuk, baik secara visual maupun semantik, Anda dapat menggunakan elemen <td>Hi, I'm your first cell.</td>
6 ('th' singkatan dari 'tajuk tabel'). Ini bekerja dengan cara yang persis sama dengan <td>Hi, I'm your first cell.</td>
0, kecuali bahwa ini menunjukkan header, bukan sel normal. Buka HTML Anda, dan ubah semua <td>Hi, I'm your first cell.</td>
0 elemen yang mengelilingi header tabel menjadi <td>Hi, I'm your first cell.</td>
6 elemen
Simpan HTML Anda dan muat di browser, dan Anda akan melihat bahwa header sekarang terlihat seperti header
Catatan. Anda dapat menemukan contoh selesai kami di dogs-table-fixed. html di GitHub (lihat langsung juga)
Kami telah menjawab sebagian pertanyaan ini — akan lebih mudah untuk menemukan data yang Anda cari ketika tajuk terlihat jelas, dan desain secara umum terlihat lebih baik
Catatan. Judul tabel hadir dengan beberapa gaya default — judul tersebut dicetak tebal dan terpusat meskipun Anda tidak menambahkan gaya Anda sendiri ke tabel, untuk membantunya menonjol
Tajuk tabel juga memiliki manfaat tambahan — bersama dengan atribut 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
0 (yang akan kita pelajari di artikel berikutnya), tajuk memungkinkan Anda membuat tabel lebih mudah diakses dengan mengaitkan setiap tajuk dengan semua data di baris atau kolom yang sama. Pembaca layar kemudian dapat membaca seluruh baris atau kolom data sekaligus, yang cukup berguna
Terkadang kita ingin sel menjangkau beberapa baris atau kolom. Ambil contoh sederhana berikut, yang menunjukkan nama-nama hewan yang umum. Dalam beberapa kasus, kami ingin menampilkan nama jantan dan betina di samping nama hewan. Terkadang kami tidak melakukannya, dan dalam kasus seperti itu kami hanya ingin nama hewan menjangkau seluruh tabel
Markup awal terlihat seperti ini
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
Tetapi hasilnya tidak memberikan apa yang kita inginkan
Kita membutuhkan cara untuk membuat "Hewan", "Kuda Nil", dan "Buaya" merentang di dua kolom, dan "Kuda" dan "Ayam" merentang ke bawah dalam dua baris. Untungnya, header tabel dan sel memiliki atribut ________22______1 dan 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
2 , yang memungkinkan kita melakukan hal-hal tersebut. Keduanya menerima nilai angka tanpa satuan, yang sama dengan jumlah baris atau kolom yang ingin Anda rentangkan. Misalnya, <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
_3 membuat sel merentang dua kolom
Mari gunakan 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
_1 dan <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
2 untuk menyempurnakan tabel ini
Pertama, buat salinan lokal dari meja hewan kita. html dan tabel minimal. file css di direktori baru di mesin lokal Anda. HTML berisi contoh hewan yang sama seperti yang Anda lihat di atas
Selanjutnya, gunakan <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
1 untuk membuat "Animals", "Hippopotamus", dan "Crocodile" membentang di dua kolom
Terakhir, gunakan <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
2 untuk membuat "Horse" dan "Chicken" membentang di dua baris
Simpan dan buka kode Anda di browser untuk melihat peningkatannya
Catatan. Anda dapat menemukan contoh selesai kami di animal-table-fixed. html di GitHub (lihat langsung juga)
Ada satu fitur terakhir yang akan kami ceritakan pada Anda di artikel ini sebelum melanjutkan. HTML memiliki metode untuk menentukan informasi gaya untuk seluruh kolom data di satu tempat — elemen 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8 dan <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
9. Ini ada karena bisa sedikit mengganggu dan tidak efisien harus menentukan gaya pada kolom - Anda biasanya harus menentukan informasi gaya Anda pada setiap <td>Hi, I'm your first cell.</td>
0 atau <td>Hi, I'm your first cell.</td>
6 di kolom, atau gunakan pemilih kompleks seperti <tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
2
Catatan. Styling kolom seperti ini. 
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
3, <tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
4, <tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
5, dan <tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
6. Untuk menyetel properti lain, Anda harus mengatur gaya setiap <td>Hi, I'm your first cell.</td>
0 atau <td>Hi, I'm your first cell.</td>
6 di kolom, atau menggunakan pemilih kompleks seperti <tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
2
Ambil contoh sederhana berikut
table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
_1
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
Yang memberi kita hasil berikut
Ini tidak ideal, karena kita harus mengulangi informasi gaya pada ketiga sel dalam kolom (kita mungkin memiliki 
<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
0 yang disetel pada ketiganya dalam proyek nyata dan menentukan gaya dalam lembar gaya terpisah)
Alih-alih melakukan ini, kita dapat menentukan informasi sekali, pada elemen 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8. <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8 elemen ditentukan di dalam wadah <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
9 tepat di bawah tag pembuka <table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
4. Kita dapat membuat efek yang sama seperti yang kita lihat di atas dengan menentukan tabel kita sebagai berikut
table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
_3
Secara efektif kita mendefinisikan dua "kolom gaya", satu menentukan informasi gaya untuk setiap kolom. Kita tidak menata kolom pertama, tetapi kita masih harus menyertakan elemen 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8 kosong — jika tidak, penataan hanya akan diterapkan ke kolom pertama
Jika kita ingin menerapkan informasi gaya pada kedua kolom, kita cukup menyertakan satu elemen 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8 dengan atribut span di atasnya, seperti ini
table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}
_4
Sama seperti 
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
1 dan <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
2, <table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
9 mengambil nilai angka tanpa satuan yang menentukan jumlah kolom yang ingin diterapkan gaya
Sekarang saatnya untuk pergi sendiri
Di bawah ini Anda dapat melihat jadwal guru bahasa. Pada hari Jumat dia memiliki kelas baru yang mengajar bahasa Belanda sepanjang hari, tetapi dia juga mengajar bahasa Jerman untuk beberapa periode pada hari Selasa dan Kamis. Dia ingin menonjolkan kolom yang berisi hari-hari dia mengajar
Buat ulang tabel dengan mengikuti langkah-langkah di bawah ini
Pertama, buat salinan lokal dari jadwal kami. html di direktori baru di mesin lokal Anda. HTML berisi tabel yang sama dengan yang Anda lihat di atas, tanpa informasi gaya kolom
Tambahkan elemen <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
9 di bagian atas tabel, tepat di bawah tag <table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
4, di mana Anda dapat menambahkan elemen <td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
8 Anda (lihat langkah selanjutnya di bawah)
Dua kolom pertama harus dibiarkan tanpa gaya
Tambahkan warna latar belakang ke kolom ketiga. Nilai untuk atribut table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
_3 Anda adalah table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
4
Tetapkan lebar terpisah pada kolom keempat. Nilai untuk atribut table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
_3 Anda adalah table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
6
Tambahkan warna latar belakang ke kolom kelima. Nilai untuk atribut table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
_3 Anda adalah table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
8
Tambahkan warna latar belakang yang berbeda ditambah batas pada kolom keenam, untuk menandakan bahwa ini adalah hari istimewa dan dia mengajar di kelas baru. Nilai untuk atribut table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
_3 Anda adalah <table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
0
Dua hari terakhir adalah hari bebas, jadi atur saja ke tanpa warna latar belakang tetapi lebar yang ditetapkan; 
Lihat bagaimana Anda melanjutkan dengan contoh. Jika Anda buntu, atau ingin memeriksa pekerjaan Anda, Anda dapat menemukan versi kami di GitHub sebagai jadwal tetap. html (lihat juga langsung)
Itu hanya tentang merangkum dasar-dasar tabel HTML. Di artikel berikutnya, kita akan melihat beberapa fitur tabel yang sedikit lebih canggih, dan mulai berpikir seberapa mudahnya mereka diakses oleh penyandang tunanetra
 
Bagaimana cara membuat tabel dalam HTML dengan contoh?
You can add a table row with the

tag. A table cell or data can be added using the

tag. ... Common HTML Table Tags..

Bagaimana tabel dasar dibuat menggunakan HTML?

Sebuah tabel HTML terdiri dari satu elemen . Elemen

Bagaimana cara membuat tabel dengan baris dan kolom dalam HTML?

We use the tag, to create table in HTML. A table consist of rows and columns. Table heading, row and column and table data can be set using one or more , and tag.