Daftar Isi

PETIK.NET | Membuat daftar dan tabel adalah hal yang sangat umum dilakukan dalam pembuatan website. Daftar berguna untuk mengorganisir informasi secara terstruktur dan tabel digunakan untuk menampilkan data secara terorganisir. Dalam artikel ini, kita akan membahas bagaimana membuat daftar dan tabel di HTML serta beberapa cara untuk mengformat tabel menggunakan CSS.

Tag ol, ul, dan li

Tag ol (ordered list) dan ul (unordered list) digunakan untuk membuat daftar pada halaman web. Perbedaan antara keduanya adalah ol menggunakan nomor dan ul menggunakan bullet point. Tag li (list item) digunakan untuk menambahkan item dalam daftar.

Contoh:

Ordered List:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol>

</ol>

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul>

</ul>

Tag table, tr, th, dan td

Tag table digunakan untuk membuat tabel pada halaman web. Tabel terdiri dari baris dan kolom. Tag tr (table row) digunakan untuk menambahkan baris dalam tabel dan tag th (table header) digunakan untuk menambahkan header dalam kolom. Sedangkan, tag td (table data) digunakan untuk menambahkan data pada kolom.

Contoh:

<table>
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
    <th>No. HP</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>Jakarta</td>
    <td>081234567890</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Bandung</td>
    <td>085678901234</td>
  </tr>
</table>

<table>

<tr>

<th>Alamat</th>

</tr>

<tr>

<td>Jakarta</td>

</tr>

<tr>

<td>Bandung</td>

</tr>

</table>

Atribut colspan dan rowspan

Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom, sedangkan atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris.

Contoh:

<table>
  <tr>
    <th>Nama</th>
    <th colspan="2">Alamat</th>
  </tr>
  <tr>
    <td rowspan="2">Andi</td>
    <td>Jakarta</td>
    <td>Selatan</td>
  </tr>
  <tr>
    <td>Jakarta</td>
    <td>Timur</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Bandung</td>
    <td>Barat</td>
  </tr>
</table>

<table>

<tr>

<th colspan="2">Alamat</th>

</tr>

<tr>

<td>Jakarta</td>

<td>Selatan</td>

</tr>

<tr>

<td>Jakarta</td>

<td>Timur</td>

</tr>

<tr>

<td>Bandung</td>

<td>Barat</td>

</tr>

</table>

Mengformat tabel dengan CSS

CSS (Cascading Style Sheets) dapat digunakan untuk mengatur tampilan tabel, seperti mengubah warna background, warna border, dan ukuran font. Kita dapat menggunakan ID atau class untuk menentukan tabel mana yang ingin diubah tampilannya.

Contoh:

HTML:

<table id="tabel1">
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
    <th>No. HP</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>Jakarta</td>
    <td>081234567890</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Bandung</td>
    <td>085678901234</td>
  </tr>
</table>

<tr>

<th>Alamat</th>

</tr>

<tr>

<td>Jakarta</td>

</tr>

<tr>

<td>Bandung</td>

</tr>

</table>

CSS

#tabel1 {
  border-collapse: collapse;
  width: 100%;
}

#tabel1 th, #tabel1 td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

#tabel1 th {
  background-color: #4CAF50;
  color: white;
}

#tabel1 tr:nth-child(even) {
  background-color: #f2f2f2;
}

#tabel1 {

border-collapse: collapse;

width: 100%;

}

#tabel1 th, #tabel1 td {

border: 1px solid black;

padding: 8px;

text-align: center;

}

#tabel1 th {

background-color: #4CAF50;

color: white;

}

#tabel1 tr:nth-child(even) {

background-color: #f2f2f2;

}

Kode CSS di atas mengatur tampilan tabel dengan ID “tabel1”. Border-collapse mengatur border antar sel menjadi satu. Lebar tabel diatur 100%. Sel yang berisi data dan header memiliki border 1px solid black dan padding 8px, serta text-align center. Header memiliki warna background #4CAF50 dan warna font putih. Setiap baris genap pada tabel memiliki warna background #f2f2f2.

Demikianlah artikel pembelajaran tentang cara membuat daftar dan tabel di HTML serta mengatur tampilannya dengan CSS. Semoga bermanfaat bagi pembaca.

Dapatkan Berita dan Informasi Terbaru dengan mengikuti kami di Google News