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 telah berubah menjadi hanya memiliki nilai 1 atau kosong (mis. border = ""). Jika Anda ingin mengubah lebar perbatasan, Anda harus menggunakan lebar pembatas Properti CSS.
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 CSS
lapisanproperti di atas mejaTDdanTHelemen. - -Gunakan properti CSS
pembatas-batasdi atas meja. - -Gunakan gaya CSS
border-color: hitam;dangaya perbatasandi atas meja. - -Gunakan gaya CSS
border-color: hitam;dangaya perbatasanpada elemen yang sesuai dari tabel. - -Bukan, Anda harus menggambarkan struktur tabel dalam a
CAPTIONatau meletakkan seluruh tabel dalamANGKAdan menggambarkannya dalamFIGCAPTION. Sebagai alternatif, Anda dapat menyederhanakan struktur tabel sehingga tidak ada penjelasan yang diperlukan. - -Gunakan CSS
lebarmilik.
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.
meluruskan-Gunakan CSSbatasproperti 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 properti CSS
warna latar belakangsebagai gantinya. bordercolor-Gunakan properti CSSwarna batassebagai gantinya.bordercolorlight-Gunakan properti CSSwarna batassebagai gantinya.bordercolordark-Gunakan properti CSSwarna batassebagai gantinya.cols-Tidak ada alternatif untuk atribut ini.tinggi-Gunakan properti CSStinggisebagai gantinya.- -Gunakan properti CSS
batassebagai gantinya. - -Gunakan properti CSS
batassebagai gantinya. - -Gunakan properti CSS
ruang putihsebagai gantinya. - -Gunakan properti CSS
vertikal-alignsebagai gantinya.
Pelajari lebih lanjut tentang Atribut TABLE Khusus Browser.
HTML5 TABLE Element Attributes
Seperti yang kami sebutkan di atas, hanya ada satu atribut, di luar atribut global, yang berlaku pada HTML5 MEJA elemen: berbatasan.
Itu berbatasan atribut 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 berbatasan atribut, Anda mengatur nilainya 1 jika ada batas dan kosong (atau tinggalkan atribut) jika tidak ada. Sebagian besar 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 meja dengan perbatasan
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 tentangMEJA atribut 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. Mengaturcellpadding untuk0 jika Anda tidak ingin ada ruang antara isi dan batas.
Untuk mengatur padding sel menjadi 20, tulis:
<> cellpadding = "20" > Tabel ini memiliki cellpadding 20. Batas sel akan dipisahkan oleh 20 piksel.
Lihat contoh tabel dengan cellpadding
Atribut mendefinisikan jumlah ruang antara sel tabel dan konten sel. Seperticellpadding, default diatur ke dua piksel, jadi Anda harus mengaturnya0 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:
bingkai = "lhs" >
Meja ini akan memiliki hanya itu sisi kiri dibingkai.
Dan contoh lain dengan bingkai bawah:
bingkai = "di bawah" >
Meja ini memiliki bingkai di bagian bawah.
Lihat beberapa tabel dengan bingkai
Atributnya mirip denganbingkai atribut, hanya itu mempengaruhi perbatasan di sekitar sel-sel tabel. Anda dapat mengatur aturan pada semua sel, di antara kolom, antar grup sepertiTBODY danTFOOT atau tidak sama sekali.
Untuk membuat tabel dengan garis hanya di antara baris, tulis:
rules = "rows" >
Meja 4x4 ini memiliki baris bukan kolom diuraikan dengan aturan atribut.
Dan lainnya dengan garis di antara kolom:
rules = "cols" >
Ini adalah sebuah meja Dimana 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 menggunakanringkasan Atribut, Anda menulis deskripsi singkat dari tabel dan meletakkannya 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 sampel 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 itulebar tidak disetel, tabel hanya akan mengambil ruang sebanyak yang diperlukan untuk menampilkan konten, dengan lebar maksimum sama dengan lebar elemen induk.
Untuk membuat tabel dengan lebar tertentu dalam piksel, tulis:
<> width = "300" > Meja ini adalah 80% dari lebar wadah itu.
Dan untuk membangun tabel dengan lebar yang merupakan persentase dari elemen induk, tulis:
<> width = "80%" > Meja ini adalah 80% dari lebar wadah itu.
Lihat contoh tabel dengan lebar
Atribut TABEL HTML 4.01 yang tidak berlaku lagi
Ada satu atribut dariMEJA elemen yang tidak lagi digunakan dalam HTML 4.01 dan usang dalam HTML5:meluruskan. 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. Sebaliknya, Anda harus menggunakan properti CSS ataumargin-left: auto; danmargin-kanan: otomatis; gaya. Itumengapung properti memberi Anda hasil yang lebih dekat dengan apameluruskan atribut yang disediakan, tetapi dapat memengaruhi cara tampilan konten laman lainnya. Itumargin-kanan: otomatis; danmargin-left: auto; adalah apa yang direkomendasikan W3C sebagai alternatif.
Berikut ini contoh yang ditinggalkan menggunakanmeluruskan atribut:
<> align = "right" > Tabel ini benar Teks mengalir di sekitarnya ke kiri
Lihat contoh yang ditinggalkan menggunakanmeluruskan atribut.
Dan untuk mendapatkan efek yang sama dengan HTML yang valid (non-deprecated), tulis:
<> style = "float: right;" > Tabel ini benar Teks mengalir di sekitarnya ke kiri
Berikut ini dijelaskanMEJA atribut yang bukan bagian dari spesifikasi HTML.
Informasi sebelumnya menggambarkan atribut elemen HTML yang valid dalam HTML 4.01 tetapi sudah usang dalam HTML5.
Penjelasan berikut iniMEJA atribut 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 denganbgcolor atribut, yangbordercolor atribut 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;" >
Meja ini memiliki batas merah.
Itubordercolorlight danbordercolordark atribut dimasukkan 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,cols atribut padaMEJA elemen 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 alebar atribut (usang dalam HTML5) banyak orang berasumsi adatinggi atribut untuk tabel juga. Tetapi karena tabel sesuai dengan lebar konten mereka atau lebar yang ditentukan dalam CSS ataulebar atribut, tingginya tidak bisa dibatasi. Jadi sebaliknya, browser memungkinkantinggi atribut untuk menentukan tinggi minimum dari tabel. Jika meja itu lebih tinggi dari ketinggian itu, itu akan menampilkan lebih tinggi. Tetapi Anda harus menggunakan properti
Dengan CSStinggi properti Anda dapat membatasi tinggi jika Anda menggunakan properti CSS juga untuk menentukan apa yang terjadi dengan konten yang berlebihan.
Untuk menetapkan tinggi minimum di atas meja, tulis:
<> style = "height: 30em;" > Meja ini setidaknya 30 ems tinggi.
Dua atribut dan ruang tambahan di sisi kiri / kanan (hspace) dan atas / bawah (vspace) dari meja. 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 = "white-space: 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 lurus sejajar dengan bagian bawah. <> style = "vertical-align: bottom;" > Isi di bagian bawah. Isi di tengah.
