Anda mungkin pernah mendengar bahwa tabel CSS dan HTML tidak bercampur. Ini bukan kasusnya. Ya, menggunakan tabel HTML untuk tata letak tidak lagi merupakan praktik terbaik desain web karena telah digantikan oleh gaya tata letak CSS, tetapi tabel masih merupakan markup yang benar untuk digunakan untuk menambahkan data tabular ke halaman web.
Karena begitu banyak profesional web menghindar dari tabel berpikir bahwa mereka hanyalah masalah, banyak dari mereka yang profesional memiliki sedikit pengalaman bekerja dengan elemen HTML umum ini, dan mereka berjuang ketika mereka harus menambahkan garis internal ke sel tabel pada halaman web.
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 dapat menggunakan tag HR untuk menambahkan garis di dalam sel individu.
Untuk menerapkan gaya yang dicakup dalam tutorial ini, Anda memerlukan tabel di halaman web. Kemudian, Anda membuat style sheet sebagai style sheet internal di kepala dokumen Anda (jika Anda hanya berurusan dengan satu halaman) atau dilampirkan pada dokumen sebagai style sheet eksternal (jika situs tersebut memiliki banyak halaman). Anda menempatkan gaya untuk menambahkan garis interior ke dalam style sheet.
Sebelum kamu memulai
Putuskan di mana Anda ingin garis muncul di dalam tabel. Anda memiliki beberapa opsi, termasuk:
- Mengelilingi semua sel untuk membentuk grid
- Menempatkan garis di antara hanya kolom
- Hanya di antara baris
- 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 kotak, tambahkan hal berikut ke stylesheet Anda:
td, th {border: solid 1px black;} Untuk menambahkan garis di antara kolom untuk membuat garis vertikal yang berjalan dari atas ke bawah pada kolom tabel, tambahkan hal berikut ke stylesheet Anda: td, th {kiri-batas: hitam 1px padat;} Jika Anda tidak ingin garis vertikal muncul di kolom pertama, Anda menambahkan kelas ke th dan td sel. Dalam contoh ini, asumsikan kelas tidak ada batasan pada sel-sel tersebut dan hapus perbatasan dengan aturan CSS. Kelas HTML yang Anda gunakan adalah: class = "no-border"> Kemudian, tambahkan gaya berikut ke style sheet: .tidak ada batasan {kiri-batas: tidak ada;} Seperti menambahkan garis di antara kolom, Anda dapat menambahkan garis horizontal antar baris dengan satu gaya sederhana yang ditambahkan ke style sheet, sebagai berikut: tr {border-bottom: solid 1px black;} Untuk menghapus perbatasan dari bagian bawah tabel, Anda akan sekali lagi menambahkan kelas ke itu menandai: class = "no-border"> Tambahkan gaya berikut ke style sheet Anda: .tidak ada batasan {batas bawah: tidak ada;} 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 lebih mudah karena Anda dapat menambahkan kelas ke baris yang Anda inginkan barisnya. class = "border-bottom"> Kemudian, tambahkan CSS ke stylesheet Anda: .border-side {kiri-batas: hitam 1px padat;}.border-bottom {border-bottom: solid 1px black;} Untuk menambahkan garis di sekitar sel-sel individual, Anda menambahkan kelas ke sel-sel yang Anda inginkan perbatasan di sekitar: class = "border"> Kemudian tambahkan CSS berikut ke stylesheet Anda: .border {border: solid 1px black;} Jika Anda ingin menambahkan garis di dalam isi sel, cara termudah untuk melakukannya adalah dengan tag aturan horizontal (). Jika Anda melihat ada celah di perbatasan Anda, pastikan bahwa gaya pembatas-batas diatur di atas meja. Tambahkan hal berikut ke stylesheet Anda: meja {border-collapse: runtuhnya;} Anda dapat menghindari semua dan menggunakan atribut border di tag tabel Anda. Namun, sadari bahwa atribut ini, meskipun tidak ditinggalkan, secara signifikan kurang fleksibel daripada CSS, karena Anda hanya dapat menentukan lebar batas dan hanya dapat memilikinya di seluruh sel tabel atau tidak ada. Cara Menambahkan Garis Antara Hanya Kolom dalam Sebuah Tabel
Cara Menambahkan Garis Antara Hanya Baris dalam Tabel
Cara Menambahkan Garis Di Antara Kolom atau Baris Tertentu dalam Tabel
Cara Menambahkan Garis di Sekitar Sel Individu dalam Tabel
Cara Menambahkan Garis Di Dalam Sel Individu dalam Tabel
Tips Berguna
