Dapatkan hasil maksimal dari tabel HTML dengan mempelajari atribut tabel
Atribut tabel HTML memberi Anda lebih banyak kontrol atas tabel HTML. Ada banyak atribut yang tersedia untuk tabel agar lebih menarik dan mengubah tampilan halaman Anda.
Atribut Elemen HTML TABLE
Dalam HTML5, elemen menggunakan atribut global dan satu atribut lainnya:. Dan itu berubah menjadi hanya memiliki nilai 1 atau kosong (yaitu border = ""). Jika Anda ingin mengubah lebar perbatasan, Anda harus menggunakan properti CSS lebar-perbatasan.
Lihat di bawah untuk mempelajari tentang atribut tabel HTML5 yang valid.
Ada juga beberapa atribut yang merupakan bagian dari spesifikasi HTML 4.01 yang telah menjadi usang dalam HTML5:
- -Gunakan properti CSS padding pada elemen TD dan TH tabel.
- -Gunakan spasi batas ruang CSS di atas meja.
- —Gunakan warna batas tepi CSS: hitam; dan gaya batas di atas meja.
- —Gunakan warna batas tepi CSS : hitam; dan gaya batas pada elemen yang sesuai dari tabel.
- - Selain itu, Anda harus menggambarkan struktur tabel dalam suatu CAPTION atau menempatkan seluruh tabel dalam suatu GAMBAR dan menggambarkannya dalam sebuah FIGCAPTION. Sebagai alternatif, Anda dapat menyederhanakan struktur tabel sehingga tidak ada penjelasan yang diperlukan.
- —Gunakan properti lebar CSS.
Dan satu atribut yang tidak lagi digunakan dalam HTML 4.01 dan juga usang dalam HTML5.
Pelajari lebih lanjut tentang Atribut HTML 4.01 TABLE.
- sejajarkan —Gunakan properti margin CSS sebagai gantinya.
Ada juga beberapa atribut yang bukan bagian dari spesifikasi HTML.
Gunakan atribut ini jika Anda tahu bahwa peramban yang Anda dukung dapat mengatasinya dan Anda tidak peduli dengan HTML yang valid.
- - Gunakan warna latar belakang CSS sebagai gantinya.
- bordercolor —Gunakan warna batas properti CSS sebagai gantinya.
- bordercolorlight —Gunakan warna batas properti CSS sebagai gantinya.
- bordercolordark —Gunakan warna batas properti CSS sebagai gantinya.
- cols —Tidak ada alternatif untuk atribut ini.
- tinggi —Gunakan tinggi properti CSS sebagai gantinya.
- —Gunakan margin properti CSS sebagai gantinya.
- —Gunakan margin properti CSS sebagai gantinya.
- —Gunakan ruang putih properti CSS sebagai gantinya.
- —Gunakan properti CSS sebagai perataan vertikal.
Pelajari lebih lanjut tentang Atribut TABLE Khusus Browser.
HTML5 TABLE Element Attributes
Seperti yang disebutkan di atas, hanya ada satu atribut, di luar atribut global, yang berlaku pada elemen TABLE HTML5: border.
Atribut border digunakan untuk mendefinisikan perbatasan di sekitar seluruh tabel dan semua sel di dalamnya. Ada beberapa pertanyaan apakah itu akan dimasukkan dalam spesifikasi HTML5, tetapi tetap karena itu memberikan informasi tentang struktur tabel, di luar hanya implikasi gaya.
Untuk menambahkan atribut border, Anda atur nilainya menjadi 1 jika ada border dan kosongkan (atau tinggalkan atribut) jika tidak ada. Kebanyakan browser juga akan mendukung 0 tanpa batas, dan nilai integer lainnya (2, 3, 30, 500, dll) untuk menyatakan lebar perbatasan dalam piksel, tetapi ini sudah usang dalam HTML5. Sebagai gantinya, Anda harus menggunakan properti gaya batas CSS untuk menentukan lebar pembatas dan gaya lainnya.
Untuk membuat tabel dengan perbatasan, tulis:
border = "1" >
Ini adalah tabel dengan batas
Ada atribut HTML 4.01 yang sudah usang dalam HTML5. Jika Anda berencana untuk menulis dokumen HTML 4.01, Anda dapat mempelajarinya, jika tidak, Anda dapat mengabaikannya. Sebagian besar atribut ini memiliki alternatif, yang dijelaskan di atas.
Kami menggambarkan atribut dari elemen yang valid dalam HTML5 (dan HTML 4.01). Ini menjelaskan atribut TABEL yang valid dalam HTML 4.01, tetapi usang dalam HTML5. Jika Anda masih menulis dokumen HTML 4.01, Anda dapat menggunakan atribut-atribut ini, tetapi kebanyakan dari mereka memiliki alternatif yang akan membuat halaman Anda lebih kedap oleh masa depan ketika Anda berpindah ke HTML5.
Atribut HTML 4.01 yang Valid
Atribut yang kami jelaskan di atas.
Satu-satunya perbedaan dalam HTML 4.01 dari HTML5 adalah Anda dapat menentukan seluruh bilangan bulat (0, 1, 2, 15, 20, 200, dll.) Untuk menentukan lebar batas dalam piksel.
Untuk membuat tabel dengan batas 5 piksel, tulis:
border = "5" >
Tabel ini memiliki batas 5px.
Lihat contoh dua tabel dengan batas.
Atribut mendefinisikan jumlah ruang antara batas sel dan isi sel. Standarnya adalah dua piksel. Setel cellpadding ke 0 jika Anda tidak ingin ada ruang di antara konten dan batas.
Untuk mengatur padding sel menjadi 20, tulis:
cellpadding = "20" >
Tabel ini memiliki cellpadding 20.
Batas sel akan dipisahkan dengan 20 piksel.
Lihat contoh tabel dengan cellpadding
Atribut mendefinisikan jumlah ruang antara sel tabel dan konten sel. Seperti cellpadding, default diatur ke dua piksel, jadi Anda harus mengaturnya ke 0 jika Anda tidak menginginkan spasi sel.
Untuk menambahkan jarak sel ke meja, tulis:
cellspacing = "20" >
Tabel ini memiliki cellspacing 20.
Sel akan dipisahkan oleh 20 piksel.
Lihat tabel dengan cellspacing
Atribut mengidentifikasi bagian mana dari perbatasan yang mengelilingi bagian luar tabel akan terlihat. Anda dapat membingkai meja Anda di keempat sisinya, satu sisi, atas dan bawah, kiri dan kanan, atau tidak sama sekali.
Berikut ini adalah HTML untuk tabel dengan hanya perbatasan sisi kiri:
frame = "lhs" >
Tabel ini
akan memiliki
hanya
sisi kiri dibingkai.
Dan contoh lain dengan bingkai bawah:
frame = "below" >
Tabel ini memiliki bingkai di bagian bawah.
Lihat beberapa tabel dengan bingkai
Atributnya mirip dengan atribut frame, hanya itu mempengaruhi perbatasan di sekitar sel-sel tabel. Anda dapat menetapkan aturan pada semua sel, di antara kolom, antara grup seperti TBODY dan TFOOT atau tidak sama sekali.
Untuk membuat tabel dengan garis hanya di antara baris, tulis:
rules = "rows" >
Tabel 4x4 ini memiliki
baris bukan kolom
diuraikan dengan
aturan atribut.
Dan lainnya dengan garis di antara kolom:
rules = "cols" >
Ini adalah
tabel
di mana
kolom
adalah
disorot
Berikut ini contoh tabel dengan aturan
Atribut memberikan informasi tentang tabel untuk pembaca layar dan agen pengguna lain yang mungkin memiliki masalah membaca tabel. Untuk menggunakan atribut ringkasan, Anda menulis deskripsi singkat tentang tabel dan menjadikannya sebagai nilai atribut. Ringkasan tidak akan ditampilkan pada halaman web di sebagian besar browser web standar.
Berikut adalah cara menulis tabel sederhana dengan ringkasan:
summary = "Ini adalah tabel contoh yang berisi informasi pengisi. Tujuan dari tabel ini adalah untuk menunjukkan ringkasan." >
kolom 1 baris 1
kolom 2 baris 1
kolom 1 baris 2
kolom 2 baris 2
Lihat tabel dengan ringkasan
Atribut mendefinisikan lebar tabel di salah satu piksel atau sebagai persentase dari elemen penampung. Jika lebar tidak diatur, tabel akan mengambil hanya sebanyak ruang yang diperlukan untuk menampilkan konten, dengan lebar maksimum sama dengan lebar elemen induk.
Untuk membuat tabel dengan lebar tertentu dalam piksel, tulis:
lebar = "300" >
Tabel ini adalah 80% dari lebar wadah yang ada di dalamnya.
Dan untuk membangun tabel dengan lebar yang merupakan persentase dari elemen induk, tulis:
lebar = "80%" >
Tabel ini adalah 80% dari lebar wadah yang ada di dalamnya.
Lihat contoh tabel dengan lebar
Atribut TABEL HTML 4.01 yang tidak berlaku lagi
Ada satu atribut dari elemen TABEL yang tidak lagi digunakan dalam HTML 4.01 dan usang dalam HTML5: align . Atribut ini memungkinkan Anda mengatur letak tabel di halaman relatif terhadap teks yang ada di sampingnya. Atribut ini telah ditinggalkan dalam HTML 4.01, dan Anda harus menghindari menggunakannya. Sebagai gantinya, Anda harus menggunakan properti CSS atau margin-left: auto; dan margin-kanan: otomatis; gaya. Properti float memberi Anda hasil yang lebih dekat dengan apa atribut align yang disediakan, tetapi dapat mempengaruhi cara tampilan halaman konten lainnya. Margin-kanan: otomatis; dan margin-kiri: otomatis; adalah apa yang direkomendasikan W3C sebagai alternatif.
Berikut ini contoh yang ditinggalkan menggunakan atribut penyelarasan:
align = "right" >
Tabel ini lurus rata
Teks mengalir mengelilinginya ke kiri
Lihat contoh yang ditinggalkan menggunakan atribut garis lurus.
Dan untuk mendapatkan efek yang sama dengan HTML yang valid (non-deprecated), tulis:
style = "float: right;" >
Tabel ini lurus rata
Teks mengalir mengelilinginya ke kiri
Berikut ini menjelaskan atribut TABEL yang bukan bagian dari spesifikasi HTML.
Informasi sebelumnya menggambarkan atribut elemen HTML yang valid dalam HTML 4.01 tetapi sudah usang dalam HTML5.
Berikut ini menjelaskan atribut TABEL yang tidak valid dalam spesifikasi saat ini. Jika Anda tidak peduli apakah halaman Anda memvalidasi dan pengguna Anda menggunakan browser yang mendukung elemen-elemen ini, maka Anda dapat menggunakan elemen-elemen ini. Tetapi kebanyakan dari mereka tidak didukung di browser modern atau memiliki alternatif yang lebih sesuai standar.
Kami tidak menyarankan menggunakan atribut ini pada tabel HTML Anda.
Atribut adalah atribut lama yang disertakan sebelum CSS secara luas didukung. Ini memungkinkan Anda untuk mengubah warna latar belakang tabel. Anda dapat menetapkan nama warna atau kode heksadesimal. Atribut ini masih berfungsi di banyak browser, tetapi untuk HTML yang kedap di masa depan, Anda tidak boleh menggunakannya, dan menggunakan CSS sebagai gantinya.
Alternatif yang lebih baik untuk atribut ini adalah properti style.
Untuk mengubah warna latar belakang suatu tabel, tulis:
style = "background-color: #ccc;" >
Tabel ini memiliki latar belakang abu-abu
Mirip dengan atribut bgcolor, atribut bordercolor memungkinkan Anda mengubah warna atribut. Atribut ini hanya didukung oleh Internet Explorer. Sebagai gantinya, Anda harus menggunakan properti gaya warna perbatasan.
Untuk mengubah warna perbatasan meja Anda, tulis:
style = "border-color: red;" >
Tabel ini memiliki batas merah.
Atribut bordercolorlight dan bordercolordark disertakan dalam Internet Explorer untuk memungkinkan Anda membuat perbatasan 3D di sekeliling tabel Anda. Namun, pada IE8 dan lebih tinggi, ini hanya didukung di Mode Standar IE7 dan Mode Quirks . Microsoft menyatakan bahwa properti ini tidak lagi didukung.
Untuk waktu yang singkat, atribut cols pada elemen TABLE diusulkan untuk membantu browser mengetahui berapa banyak kolom yang dimiliki tabel. Premisnya adalah bahwa ini akan membantu mempercepat pembuatan tabel besar. Namun itu hanya diimplementasikan oleh Internet Explorer, dan pada IE8 dan lebih tinggi, ini hanya didukung dalam Mode Standar IE7 dan Mode Quirks.
Karena ada atribut lebar (usang dalam HTML5) banyak orang berasumsi ada atribut ketinggian untuk tabel juga. Tetapi karena tabel sesuai dengan lebar konten mereka atau lebar yang ditentukan dalam atribut CSS atau lebar, tingginya tidak dapat dibatasi. Jadi sebagai gantinya, peramban mengizinkan atribut ketinggian untuk menentukan tinggi minimum tabel. Jika meja itu lebih tinggi dari ketinggian itu, itu akan menampilkan lebih tinggi. Tetapi Anda harus menggunakan properti
Dengan properti ketinggian CSS Anda dapat membatasi tinggi jika Anda menggunakan properti CSS juga untuk menentukan apa yang terjadi dengan konten berlebih.
Untuk menetapkan tinggi minimum di atas meja, tulis:
style = "height: 30em;" >
Tabel ini setidaknya 30 ems tinggi.
Dua atribut dan ruang tambahan di sekitar sisi kiri / kanan (hspace) dan atas / bawah (vspace) dari tabel. Anda harus menggunakan properti gaya sebagai gantinya.
Untuk mengatur ruang vertikal menjadi 20 piksel dan ruang horizontal hingga 40 piksel, tulis:
style = "margin: 20px 40px;"
Tabel ini memiliki vspace 20 piksel dan hspace 40 piksel.
Atribut adalah atribut boolean yang menentukan apakah isi tabel harus membungkus di tepi elemen induk atau jendela atau memaksa pengguliran horizontal. Sebaliknya, Anda harus menentukan karakteristik pembungkus setiap sel tabel menggunakan properti CSS.
Untuk membuat kolom dengan banyak teks tidak dibungkus, tulis:
style = "spasi putih: nowrap;" > Ini adalah kolom dengan banyak konten. Tetapi bahkan jika itu lebih lebar dari kontainer, teks tidak boleh membungkus ke baris berikutnya, tetapi memaksa jendela browser untuk menggulir secara horizontal untuk melihat semua konten.
Akhirnya, atribut mendefinisikan bagaimana isi setiap sel harus selaras secara vertikal di dalam sel. Alih-alih atribut yang tidak valid ini, Anda harus menggunakan properti CSS pada setiap sel yang ingin Anda ubah perataannya. Anda tidak akan melihat efek dari gaya ini kecuali konten sel kurang dari ruang yang tersedia yang dibuat oleh sel-sel lain yang lebih besar.
Untuk memaksa sel agar sejajar dengan bagian bawah (bukan di tengah, sebagai default), tulis:
Sel ini lebih panjang dari yang lain sehingga akan memaksa tinggi menjadi lebih tinggi. Jadi Anda akan melihat bahwa sel yang lurus secara vertikal sejajar dengan bagian bawah.
style = "vertical-align: bawah;" > Isi di bagian bawah.
Isi di tengah.