Pelajari cara membuat batas tabel CSS hanya dalam lima menit
Anda mungkin pernah mendengar bahwa tabel CSS dan HTML tidak bercampur. Ini tidak benar. Ya, menggunakan tabel HTML untuk tata letak tidak lagi merupakan praktik terbaik desain web, yang telah digantikan oleh gaya tata letak CSS, tetapi tabel masih merupakan markup yang benar untuk digunakan untuk menambahkan data tabular ke halaman web.
Sayangnya, karena begitu banyak profesional web yang menghindar dari tabel yang menganggap bahwa mereka beracun, banyak dari mereka yang profesional memiliki sedikit pengalaman bekerja dengan elemen HTML umum ini dan perjuangan ketika mereka harus menangani mereka di halaman web. Misalnya, jika Anda memiliki tabel di halaman dan Anda ingin menambahkan baris internal ke sel tabel.
Table Borders CSS
Ketika Anda menggunakan CSS untuk menambahkan batas ke tabel, itu hanya menambahkan perbatasan di bagian luar tabel. Jika Anda ingin menambahkan garis internal ke sel-sel individual dari tabel itu, Anda perlu menambahkan batas ke elemen CSS interior. Anda juga dapat menggunakan tag HR untuk menambahkan garis di dalam sel individu.
Untuk menerapkan gaya yang tercakup dalam artikel ini, Anda jelas harus memiliki tabel di halaman web Anda. Anda kemudian harus membuat style sheet sebagai style sheet internal di bagian atas dokumen Anda (Anda mungkin hanya akan melakukan ini jika "situs" Anda adalah satu halaman) atau dilampirkan pada dokumen sebagai style sheet eksternal (ini adalah apa yang Anda akan dilakukan jika situs Anda terdiri dari banyak halaman - memungkinkan Anda untuk mengatur semua halaman dari satu lembar eksternal). Anda akan menempatkan gaya untuk menambahkan garis interior ke dalam style sheet itu.
Sebelum kamu memulai
Pertama Anda perlu memutuskan di mana Anda ingin garis muncul di meja Anda. Anda memiliki beberapa opsi, termasuk:
- Mengelilingi semua sel untuk membentuk grid;
- Memposisikan garis antara hanya kolom;
- Hanya di antara baris; atau
- Di antara kolom atau baris tertentu.
Anda juga dapat memposisikan garis-garis di sekitar sel-sel individual atau di dalam sel-sel individual.
Cara Menambahkan Garis Di Sekitar Semua Sel dalam Tabel
Untuk menambahkan garis di sekeliling semua sel di tabel Anda, membuat efek seperti grid, tambahkan hal berikut ke style sheet Anda:
td, th {
border: solid 1px black;
}
Cara Menambahkan Garis Antara Hanya Kolom dalam Sebuah Tabel
Untuk menambahkan garis di antara kolom (ini membuat garis vertikal yang berjalan dari atas ke bawah pada kolom tabel), tambahkan hal berikut ke style sheet Anda:
td, th {
kiri-batas: hitam 1px padat;
}
Kemudian, jika Anda tidak ingin mereka muncul di kolom pertama, Anda perlu menambahkan kelas ke sel-sel th dan td . Dalam contoh ini, kami menganggap kami memiliki kelas tanpa batas pada sel-sel tersebut dan kami menghapus batas dengan aturan CSS yang lebih spesifik ini. Jadi di sini adalah kelas HTML yang akan kita gunakan:
class = "no-border">
Lalu kita bisa menambahkan style berikut ke style sheet kami:
.tidak ada batasan {
kiri-batas: tidak ada;
}
Cara Menambahkan Garis Antara Hanya Baris dalam Tabel
Seperti menambahkan garis di antara kolom, Anda dapat melakukannya hanya dengan satu gaya sederhana yang ditambahkan ke style sheet Anda. CSS di bawah ini akan menambahkan garis vertikal di antara setiap baris tabel kami:
tr {
border-bottom: solid 1px black;
}
Dan untuk menghapus perbatasan dari bagian bawah tabel, Anda akan sekali lagi menambahkan kelas ke tag tr tersebut:
class = "no-border">
Tambahkan gaya berikut ke style sheet Anda:
.tidak ada batasan {
batas bawah: tidak ada;
}
Cara Menambahkan Garis Di Antara Kolom atau Baris Tertentu dalam Tabel
Jika Anda hanya menginginkan garis di antara baris atau kolom tertentu, Anda perlu menggunakan kelas pada sel atau baris tersebut. Menambahkan garis antar kolom sedikit lebih sulit daripada antar baris karena Anda harus menambahkan kelas ke setiap sel di kolom itu. Jika tabel Anda secara otomatis dihasilkan dari CMS sejenis , ini mungkin tidak mungkin, tetapi jika Anda tangan coding halaman, Anda bisa menambahkan kelas yang sesuai yang diperlukan untuk mencapai efek ini.
class = "side-border">
Menambahkan garis antar baris jauh lebih mudah, karena Anda dapat menambahkan kelas ke baris yang Anda inginkan barisnya.
class = "border-bottom">
Kemudian tambahkan CSS ke style sheet Anda:
.border-side {
kiri-batas: hitam 1px padat;
}
.border-bottom {
border-bottom: solid 1px black;
}
Cara Menambahkan Garis di Sekitar Sel Individu dalam Tabel
Untuk menambahkan garis di sekitar sel-sel individual, Anda menambahkan kelas ke sel-sel yang Anda inginkan perbatasan di sekitar:
class = "border">
Lalu tambahkan CSS berikut ke style sheet Anda:
.border {
border: solid 1px black;
}
Cara Menambahkan Garis Di Dalam Sel Individu dalam Tabel
Jika Anda ingin menambahkan garis di dalam isi sel, cara termudah untuk melakukannya adalah dengan tag aturan horizontal (
).
Tips Berguna
Jika Anda melihat ada celah di perbatasan Anda, Anda harus memastikan bahwa gaya pembatas-batas diatur di meja Anda. Tambahkan yang berikut ke style sheet Anda:
meja {
border-collapse: runtuhnya;
}
Anda dapat menghindari semua CSS di atas dan menggunakan atribut border di tag tabel Anda. Namun, sadari bahwa atributnya, meskipun tidak ditinggalkan, secara signifikan kurang fleksibel daripada CSS, karena Anda hanya dapat menentukan lebar batas dan hanya dapat memilikinya di semua sel tabel atau tidak ada.