Mengatur Tampilan Tabel dengan CSS

Untuk Mengatur tampilan tabel menggunakan CSS

Anda dapat menggunakan beberapa properti CSS yang relevan untuk mencapai hasil yang diinginkan. Berikut ini adalah beberapa properti yang umum digunakan untuk mengatur tampilan tabel:

border-collapse : Properti ini digunakan untuk menggabungkan atau memisahkan batas sel tabel. Nilai collapse akan menggabungkan batas sel, sementara nilai separate akan memisahkan batas sel. Contoh: border-collapse: collapse;

width : Properti ini digunakan untuk mengatur lebar tabel. Anda dapat mengatur lebar dalam unit piksel (px) atau persen (%). Contoh: width: 100%;

background-color : Properti ini digunakan untuk mengatur warna latar belakang tabel atau sel tabel. Contoh: background-color: #f2f2f2;

color : Properti ini digunakan untuk mengatur warna teks dalam tabel atau sel tabel. Contoh: color: #333333;

font-weight : Properti ini digunakan untuk mengatur ketebalan huruf pada tabel atau sel tabel. Contoh: font-weight: bold;

padding : Properti ini digunakan untuk mengatur jarak antara isi tabel dengan batas sel. Anda dapat mengatur jarak pada semua sisi (padding: 8px;) atau menggunakan notasi sisi-spesifik seperti padding-top, padding-right, padding-bottom, padding-left. Contoh: padding: 8px;

border : Properti ini digunakan untuk mengatur batas pada sel tabel. Anda dapat mengatur ketebalan, jenis, dan warna batas menggunakan notasi yang tepat. Contoh: border: 1px solid #dddddd;

text-align : Properti ini digunakan untuk mengatur penjajaran teks dalam sel tabel. Anda dapat menggunakan nilai left, center, atau right untuk mengatur penjajaran horizontal. Contoh: text-align: center;

vertical-align : Properti ini digunakan untuk mengatur penjajaran teks dalam sel tabel secara vertikal. Anda dapat menggunakan nilai top, middle, atau bottom untuk mengatur penjajaran vertikal. Contoh: vertical-align: middle;

Pseudoselector CSS seperti :nth-child(odd) dan :hover dapat digunakan untuk memberikan gaya tambahan pada sel-sel tabel tertentu, misalnya memberikan latar belakang berbeda untuk sel-sel ganjil atau mengubah tampilan saat kursor berada di atas sel.

Ini hanyalah beberapa contoh properti CSS yang umum digunakan untuk mengatur tampilan tabel. Anda dapat mengombinasikan dan mengubah properti ini sesuai dengan kebutuhan Anda untuk mencapai tampilan tabel yang diinginkan.

ini adalah contoh source code mengatur tabel menggunakan css
Langsung Saja Copas kode nya dibawah ini

style.css

/* Gaya umum untuk tabel */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Gaya header tabel */
th {
  background-color: #f2f2f2;
  color: #333333;
  font-weight: bold;
  padding: 8px;
  border: 1px solid #dddddd;
}

/* Gaya sel tabel */
td {
  padding: 8px;
  border: 1px solid #dddddd;
}

/* Gaya sel ganjil */
tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

/* Gaya saat kursor berada di atas sel */
tr:hover td {
  background-color: #e5e5e5;
}

/* Gaya tabel alternatif */
.alt-table {
  background-color: #f2f2f2;
}

.alt-table th {
  background-color: #dddddd;
  color: #333333;
}

tabel.html

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aminah</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <td>Mulyadi</td>
      <td>30</td>
      <td>Bandung</td>
    </tr>
    <tr>
      <td>Sutrisno</td>
      <td>35</td>
      <td>Yogyakarta</td>
    </tr>
  </tbody>
</table>

jadi seperti itulah cara mengatur tabel menggunakan css, sampai jumpa untuk selanjutnya