Dapatkan lebih banyak jadual HTML dengan mempelajari atribut jadual
Atribut jadual HTML memberikan anda lebih banyak kawalan ke atas jadual HTML. Terdapat banyak atribut yang terdapat pada jadual untuk menjadikannya lebih menarik dan mengubah rupa halaman anda.
Sifat Elemen HTML JADUAL
Dalam HTML5, elemen menggunakan atribut global dan satu atribut lain:. Dan ia telah berubah hanya mempunyai nilai 1 atau kosong (iaitu sempadan = ""). Jika anda ingin mengubah lebar sempadan, anda harus menggunakan hak CSS lebar sempadan.
Lihat di bawah untuk mengetahui tentang atribut jadual HTML5 yang sah.
Terdapat juga beberapa atribut yang merupakan sebahagian daripada spesifikasi HTML 4.01 yang telah menjadi usang dalam HTML5:
- -Gunakan harta padding CSS pada unsur TD dan TH jadual.
- -Gunakan ruang jarak sempadan CSS di atas meja.
- -Gunakan gaya CSS warna sempadan: hitam; dan gaya sempadan di atas meja.
- -Gunakan gaya CSS warna sempadan: hitam; dan gaya sempadan pada unsur-unsur sesuai jadual.
- -Sebaliknya, anda harus menerangkan struktur jadual dalam CAPTION atau meletakkan keseluruhan jadual dalam RAJAH dan menerangkannya dalam FIGCAPTION. Sebagai alternatif, anda boleh mempermudahkan struktur jadual agar tidak ada penjelasan.
- -Gunakan hartanah lebar CSS.
Dan satu atribut yang tidak digunakan dalam HTML 4.01 dan juga usang dalam HTML5.
Ketahui lebih lanjut mengenai Atribut HTML 4.01 TABLE.
- align- Use the margin margin property instead.
Terdapat juga beberapa atribut yang bukan sebahagian daripada spesifikasi HTML.
Gunakan atribut ini jika anda tahu bahawa pelayar yang anda menyokong dapat mengendalikannya dan anda tidak peduli tentang HTML yang sah.
- -Gunakan warna latar belakang hak milik CSS sebaliknya.
- bordercolor -Gunakan warna sempadan CSS sebagai sebaliknya.
- bordercolorlight -Gunakan warna sempadan CSS sebagai sebaliknya.
- bordercolordarkark -Menggunakan warna sempadan CSS sebagai sebaliknya.
- cols -Tidak ada alternatif kepada atribut ini.
- ketinggian -Gunakan ketinggian hak CSS sebagai gantinya.
- -Gunakan margin hartanah CSS sebaliknya.
- -Gunakan margin hartanah CSS sebaliknya.
- -Gunakan ruang putih hak milik CSS sebaliknya.
- -Gunakan properti CSS menegak-align sebaliknya.
Ketahui lebih lanjut mengenai Atribut TABLE Specific Browser.
Atribut elemen elemen HTML5
Seperti yang kita nyatakan di atas, hanya terdapat satu atribut, di luar atribut global, yang sah pada elemen HTML5 TABLE: sempadan.
Atribut sempadan digunakan untuk menentukan sempadan di sekeliling meja dan semua sel-sel di dalamnya. Terdapat persoalan sama ada ia akan disertakan dalam spesifikasi HTML5, tetapi ia tetap kerana ia memberikan maklumat mengenai struktur meja, di luar implikasi gaya sahaja.
Untuk menambah atribut sempadan, anda menetapkan nilai kepada 1 jika terdapat sempadan dan kosong (atau keluar dari atribut) jika tidak. Kebanyakan penyemak imbas juga akan menyokong 0 untuk tiada sempadan, dan sebarang nilai bulat lain (2, 3, 30, 500, dll) untuk mengisytiharkan lebar sempadan dalam piksel, tetapi ini usang dalam HTML5. Sebaliknya, anda harus menggunakan sifat gaya sempadan CSS untuk menentukan lebar sempadan dan gaya lain.
Untuk membuat jadual dengan sempadan, tulis:
border = "1" >
Ini adalah jadual dengan sempadan
Terdapat atribut HTML 4.01 yang usang dalam HTML5. Jika anda merancang untuk menulis dokumen HTML 4.01, anda boleh belajar mereka, jika tidak, anda boleh mengabaikannya. Kebanyakan sifat ini mempunyai alternatif, yang dinyatakan di atas.
Kami menerangkan sifat-sifat elemen yang sah dalam HTML5 (dan HTML 4.01). Ini menerangkan atribut TABLE yang sah dalam HTML 4.01, tetapi sudah usang dalam HTML5. Jika anda masih menulis dokumen HTML 4.01, anda boleh menggunakan atribut ini, tetapi kebanyakannya mempunyai alternatif yang akan menjadikan laman anda lebih masa depan untuk bukti apabila anda beralih ke HTML5.
Atribut HTML 4.01 sah
Atribut yang kami terangkan di atas.
Satu-satunya perbezaan dalam HTML 4.01 dari HTML5 adalah bahawa anda boleh menentukan mana-mana integer keseluruhan (0, 1, 2, 15, 20, 200, dan lain-lain) untuk menentukan lebar sempadan dalam piksel.
Untuk membina meja dengan sempadan 5px, tulis:
border = "5" >
Jadual ini mempunyai sempadan 5px.
Lihat contoh dua jadual dengan sempadan.
Atribut ini menentukan jumlah ruang di antara sempadan sel dan kandungan sel. Lalai adalah dua piksel. Tetapkan sel pengedap ke 0 jika anda tidak mahu ruang antara kandungan dan sempadan.
Untuk menetapkan padding sel kepada 20, tulis:
cellpadding = "20" >
Jadual ini mempunyai penanda sel 20.
Sempadan sel akan dipisahkan dengan 20 piksel.
Lihat contoh jadual dengan pena sel
Atribut mentakrifkan jumlah ruang antara sel-sel meja dan kandungan sel. Seperti sel penyaduran, lalai ditetapkan kepada dua piksel, jadi anda mesti menetapkannya kepada 0 jika anda tidak mahu jarak sel.
Untuk menambah jarak sel ke meja, tulis:
cellspacing = "20" >
Jadual ini mempunyai sel simpanan 20.
Sel akan dipisahkan dengan 20 piksel.
Lihat jadual dengan ruang sel
Atribut mengenalpasti bahagian mana sempadan yang mengelilingi luar meja akan kelihatan. Anda boleh bingkai meja anda di semua empat sisi, mana-mana bahagian, atas dan bawah, kiri dan kanan, atau tidak.
Berikut adalah HTML untuk jadual dengan hanya sempadan sebelah kiri:
frame = "lhs" >
Jadual ini
akan mempunyai
hanya
sebelah kiri dibingkai.
Dan contoh lain dengan bingkai bawah:
frame = "below" >
Meja ini mempunyai bingkai di bahagian bawah.
Semak beberapa jadual dengan bingkai
Atribut adalah sama dengan atribut bingkai, ia hanya menjejaskan sempadan di sekeliling sel-sel jadual. Anda boleh menetapkan peraturan pada semua sel, antara lajur, antara kumpulan seperti TBODY dan TFOOT atau tidak.
Untuk membina jadual dengan baris hanya di antara baris, tulis:
rules = "row" >
Jadual 4x4 ini
baris bukan tiang
digariskan dengan
atribut peraturan.
Dan yang lain dengan garis di antara lajur:
rules = "cols" >
Ini
jadual
di mana
lajur
adalah
diserlahkan
Berikut adalah contoh jadual dengan peraturan
Atribut menyediakan maklumat mengenai jadual untuk pembaca skrin dan ejen pengguna lain yang mungkin menghadapi masalah membaca jadual. Untuk menggunakan atribut ringkasan, anda menulis huraian ringkas jadual dan meletakkannya sebagai nilai atribut. Ringkasan tidak akan dipaparkan pada halaman web dalam kebanyakan pelayar web standard.
Berikut ialah cara menulis jadual ringkas dengan ringkasan:
summary = "Ini adalah jadual sampel yang mengandungi maklumat pengisi. Tujuan jadual ini adalah untuk menunjukkan ringkasan." >
lajur 1 baris 1
lajur 2 baris 1
lajur 1 baris 2
lajur 2 baris 2
Lihat jadual dengan ringkasan
Atribut mentakrifkan lebar jadual sama ada piksel atau sebagai peratusan elemen kontena. Sekiranya lebar tidak ditetapkan, jadual akan memakan hanya sebanyak ruang yang diperlukan untuk memaparkan kandungannya, dengan lebar maksimum sama dengan lebar unsur induk.
Untuk membina jadual dengan lebar tertentu dalam piksel, tulis:
width = "300" >
Jadual ini adalah 80% daripada lebar bekas yang ada.
Dan untuk membina meja dengan lebar yang merupakan peratusan elemen induk, tulis:
width = "80%" >
Jadual ini adalah 80% daripada lebar bekas yang ada.
Lihat contoh jadual dengan lebar
Dikecualikan HTML 4.01 TABLE Atribute
Terdapat satu sifat unsur TABLE yang tidak lagi digunakan dalam HTML 4.01 dan usang dalam HTML5: jajar . Atribut ini membolehkan anda menetapkan di mana jadual harus berada di halaman berkenaan dengan teks yang di sebelahnya. Atribut ini telah ditamatkan pada HTML 4.01, dan anda harus mengelak daripada menggunakannya. Sebaliknya, anda harus menggunakan harta CSS atau margin-left: auto; dan margin-right: auto; gaya. Harta float memberi anda hasil yang lebih dekat dengan apa yang diberikan oleh atribut sejajar, tetapi ia boleh menjejaskan cara keseluruhan kandungan halaman dipaparkan. Margin-right: auto; dan margin-left: auto; adalah apa yang W3C mengesyorkan sebagai alternatif.
Berikut adalah contoh yang tidak digunakan menggunakan atribut selari:
align = "right" >
Jadual ini betul sejajar
Teks mengalir di sekelilingnya ke kiri
Lihat contoh yang tidak digunakan menggunakan atribut selari.
Dan untuk mendapatkan kesan yang sama dengan HTML yang sah (tanpa penangguhan), tulis:
style = "float: right;" >
Jadual ini betul sejajar
Teks mengalir di sekelilingnya ke kiri
Berikut ini menerangkan atribut TABLE yang bukan sebahagian daripada spesifikasi HTML.
Maklumat terdahulu menerangkan atribut elemen HTML yang sah dalam HTML 4.01 tetapi sudah usang dalam HTML5.
Berikut ini menerangkan atribut TABLE yang tidak sah dalam sebarang spesifikasi semasa. Sekiranya anda tidak peduli sama ada laman anda mengesahkan dan pengguna anda menggunakan penyemak imbas yang menyokong unsur-unsur ini, maka anda boleh menggunakan elemen ini. Tetapi kebanyakan mereka sama ada tidak disokong dalam pelayar moden atau mempunyai alternatif yang lebih mematuhi standard.
Kami tidak mengesyorkan menggunakan atribut ini pada jadual HTML anda.
Atribut adalah atribut lama yang dimasukkan sebelum CSS disokong secara meluas. Ia membolehkan anda mengubah warna latar belakang meja. Anda boleh menetapkan nama warna atau kod heksadesimal. Atribut ini masih berfungsi dalam banyak pelayar, tetapi untuk HTML yang dibuktikan masa depan, anda tidak seharusnya menggunakannya, dan menggunakan CSS sebaliknya.
Alternatif yang lebih baik untuk sifat ini adalah sifat gaya.
Untuk menukar warna latar belakang jadual, tulis:
style = "background-color: #ccc;" >
Meja ini mempunyai latar belakang kelabu
Sama dengan atribut bgcolor, atribut bordercolor membolehkan anda mengubah warna atribut. Atribut ini hanya disokong oleh Internet Explorer. Sebaliknya, anda perlu menggunakan gaya gaya sempadan.
Untuk menukar warna sempadan meja anda, tulis:
style = "border border: red;" >
Jadual ini mempunyai sempadan merah.
Ciri-ciri bordercolor dan bordercolordarkark dimasukkan dalam Internet Explorer untuk membolehkan anda membuat bingkai 3D di sekeliling meja anda. Bagaimanapun, pada IE8 dan ke atas, ini hanya disokong dalam Mod Standard IE7 dan Mod Kuasa . Microsoft menyatakan bahawa sifat-sifat ini tidak lagi disokong.
Untuk masa yang singkat, atribut cols pada elemen TABLE dicadangkan untuk membantu penyemak imbas mengetahui berapa banyak lajur yang ada dalam jadual. Premis adalah bahawa ini akan membantu mempercepatkan penyebaran jadual besar. Walau bagaimanapun ia hanya dilaksanakan oleh Internet Explorer, dan pada IE8 dan ke atas, ini hanya disokong dalam Mod Standard IE7 dan Mod Kuasa.
Kerana terdapat atribut lebar (usang dalam HTML5) ramai orang mengandaikan ada atribut ketinggian untuk jadual juga. Tetapi kerana jadual sesuai dengan lebar kandungan mereka atau lebar yang ditetapkan dalam atribut CSS atau lebar, ketinggian tidak dapat dikekang. Jadi, perayauan membenarkan atribut ketinggian untuk menentukan ketinggian minimum jadual. Jika meja lebih tinggi daripada ketinggian itu, ia akan memaparkan lebih tinggi. Tetapi anda harus menggunakan harta itu
Dengan ciri ketinggian CSS anda boleh mengekang ketinggian jika anda menggunakan sifat CSS serta untuk menentukan apa yang berlaku dengan mana-mana kandungan yang berlebihan.
Untuk menetapkan ketinggian minimum di atas meja, tulis:
style = "height: 30em;" >
Jadual ini sekurang-kurangnya 30 ems tinggi.
Kedua-dua atribut dan ruang tambahan di sebelah kiri / kanan (hspace) dan atas / bawah (ruang kosong) dari meja. Anda harus menggunakan gaya gaya sebaliknya.
Untuk menetapkan ruang menegak hingga 20 piksel dan ruang mendatar hingga 40 piksel, tulis:
style = "margin: 20px 40px;"
Jadual ini mempunyai ruang kosong dari 20 piksel dan hspace sebanyak 40 piksel.
Atribut adalah atribut boolean yang mentakrifkan apakah kandungan jadual harus dibungkus di tepi elemen induk atau tetingkap atau memaksa menatal mendatar. Sebaliknya, anda harus menentukan ciri pembungkusan setiap sel jadual menggunakan harta CSS.
Untuk membuat lajur dengan banyak teks tidak balut, tulis:
style = "white-space: nowrap;" > Ini adalah lajur dengan satu tan kandungan. Tetapi walaupun lebih luas daripada bekas itu, teks tidak harus dilekatkan ke baris berikutnya, tetapi sebaliknya memaksa tetingkap penyemak imbas untuk menatal secara mendatar untuk melihat semua kandungan.
Akhirnya, atribut menentukan bagaimana kandungan setiap sel sepatutnya selaras secara menegak dalam sel. Daripada atribut yang tidak sah ini, anda harus menggunakan sifat CSS pada setiap sel yang anda mahu mengubah penjajaran. Anda tidak akan menyedari kesan gaya ini melainkan kandungan sel kurang daripada ruang yang disediakan oleh sel lain yang lebih besar.
Untuk memaksa sel untuk menyelaraskan ke bahagian bawah (bukannya tengah, sebagai lalai), tulis:
Sel ini lebih lama daripada selebihnya dan oleh itu akan memaksa ketinggian menjadi lebih tinggi. Jadi, anda akan melihat bahawa sel berturutan vertikal adalah sejajar dengan bahagian bawah.
style = "vertical-align: bottom;" > Kandungan di bahagian bawah.
Kandungan di tengah.