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 menjadi hanya mempunyai nilai 1 atau kosong (iaitu border = ""). Jika anda ingin menukar lebar sempadan, anda harus menggunakan lebar sempadan Harta CSS.
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 CSS
paddingharta di atas mejaTDdanTHunsur-unsur. - -Gunakan harta CSS
jarak sempadandi atas meja. - -Gunakan gaya CSS
warna sempadan: hitam;dangaya sempadandi atas meja. - -Gunakan gaya CSS
warna sempadan: hitam;dangaya sempadanpada unsur-unsur yang sesuai di dalam jadual. - -Sebaliknya, anda harus menerangkan struktur jadual dalam a
CAPTIONatau letakkan keseluruhan jadual dalam aRAJAHdan menggambarkannya dalam aFIGCAPTION. Sebagai alternatif, anda boleh mempermudahkan struktur jadual agar tidak ada penjelasan. - -Gunakan CSS
lebarharta.
Dan satu atribut yang tidak digunakan dalam HTML 4.01 dan juga usang dalam HTML5.
Ketahui lebih lanjut mengenai Atribut HTML 4.01 TABLE.
menyelaraskan-Gunakan CSSmarginsebaliknya.
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 harta CSS
warna latar belakangsebaliknya. bordercolor-Gunakan harta CSSwarna sempadansebaliknya.bordercolorlight-Gunakan harta CSSwarna sempadansebaliknya.bordercolordarkark-Gunakan harta CSSwarna sempadansebaliknya.cols-Tidak ada alternatif kepada atribut ini.ketinggian-Gunakan harta CSSketinggiansebaliknya.- -Gunakan harta CSS
marginsebaliknya. - -Gunakan harta CSS
marginsebaliknya. - -Gunakan harta CSS
ruang putihsebaliknya. - -Gunakan harta CSS
menegaksebaliknya.
Ketahui lebih lanjut mengenai Atribut TABLE Specific Browser.
Atribut elemen elemen HTML5
Seperti yang telah kami nyatakan di atas, terdapat hanya satu atribut, di luar atribut global, yang sah pada HTML5 JADUAL elemen: sempadan.
The sempadan atribut 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 sempadan atribut, anda menetapkan nilai kepada 1 jika ada sempadan dan kosong (atau tolak atribut) jika tidak ada. Kebanyakan penyemak imbas juga akan menyokong 0 untuk tiada sempadan, dan sebarang nilai integer lain (2, 3, 30, 500, dll) untuk mengisytiharkan lebar sempadan dalam piksel, tetapi ini sudah 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 meja 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 menerangkanJADUAL atribut 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. Menetapkansel pengedap kepada0 jika anda tidak mahu ruang antara kandungan dan sempadan.
Untuk menetapkan padding sel kepada 20, tulis:
<> cellpadding = "20" > Jadual ini mempunyai a sel pengedap daripada 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. Sukasel pengedap, lalai ditetapkan kepada dua piksel, jadi anda mesti menetapkannya0 jika anda tidak mahu jarak sel.
Untuk menambah jarak sel ke meja, tulis:
<> cellspacing = "20" > Jadual ini mempunyai a sel penyiasatan daripada 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 pasti akan hanya sebelah kiri dibingkai.
Dan contoh lain dengan bingkai bawah:
bingkai = "di bawah" >
Jadual ini mempunyai bingkai di bahagian bawah.
Semak beberapa jadual dengan bingkai
Atribut adalah sama denganbingkai atribut, hanya ia menjejaskan sempadan di sekeliling sel-sel meja. Anda boleh menetapkan peraturan pada semua sel, antara lajur, antara kumpulan sepertiTBODY danTFOOT atau tidak.
Untuk membina jadual dengan baris hanya di antara baris, tulis:
peraturan = "baris" >
Jadual 4x4 ini ada baris tidak lajur digariskan dengan peraturan atribut.
Dan yang lain dengan garis di antara lajur:
peraturan = "cols" >
Ini adalah meja Dimanakah 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 menggunakanringkasan atribut, 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:
<> ringkasan = "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. Sekiranyalebar tidak ditetapkan, jadual akan mengambil hanya sebanyak ruang yang diperlukan untuk memaparkan kandungan, dengan lebar maksimum sama dengan lebar unsur induk.
Untuk membina jadual dengan lebar tertentu dalam piksel, tulis:
<> lebar = "300" > Jadual ini adalah 80% daripada lebar bekas yang ada di dalamnya.
Dan untuk membina meja dengan lebar yang merupakan peratusan elemen induk, tulis:
<> lebar = "80%" > Jadual ini adalah 80% daripada lebar bekas yang ada di dalamnya.
Lihat contoh jadual dengan lebar
Dikecualikan HTML 4.01 TABLE Atribute
Terdapat satu sifat dariJADUAL unsur yang tidak digunakan dalam HTML 4.01 dan usang dalam HTML5:menyelaraskan. 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 sifat CSS atau yangmargin-left: auto; danmargin-right: auto; gaya. Theterapung harta memberikan anda hasil yang lebih dekat dengan apa yangmenyelaraskan atribut yang disediakan, tetapi ia boleh menjejaskan cara keseluruhan kandungan halaman dipaparkan. Themargin-right: auto; danmargin-left: auto; adalah apa yang W3C mengesyorkan sebagai alternatif.
Berikut adalah contoh yang tidak digunakan menggunakanmenyelaraskan atribut:
<> align = "right" > Jadual ini betul sejajar Teks mengalir di sekelilingnya ke kiri
Lihat contoh yang tidak digunakan menggunakanmenyelaraskan atribut.
Dan untuk mendapatkan kesan yang sama dengan HTML yang sah (tanpa penangguhan), tulis:
<> gaya = "float: right;" > Jadual ini betul sejajar Teks mengalir di sekelilingnya ke kiri
Makluman berikutJADUAL atribut 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 menerangkanJADUAL atribut 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:
<> gaya = "background-color: #ccc;" > Jadual ini mempunyai latar belakang kelabu
Sama sepertibgcolor atribut, yangbordercolor atribut 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:
gaya = "border color: red;" >
Jadual ini mempunyai sempadan merah.
Thebordercolorlight danbordercolordarkark atribut dimasukkan dalam Internet Explorer untuk membolehkan anda membuat sempadan 3D di sekitar 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, yangcols atribut padaJADUAL elemen 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 ada alebar atribut (usang dalam HTML5) ramai orang menganggap terdapat aketinggian atribut untuk jadual juga. Tetapi kerana jadual sesuai dengan lebar kandungan mereka atau lebar yang ditetapkan dalam CSS ataulebar atribut, ketinggian tidak dapat dikekang. Jadi sebaliknya, pelayar membenarkannyaketinggian atribut untuk menentukan ketinggian minimum jadual. Jika meja lebih tinggi daripada ketinggian itu, ia akan memaparkan lebih tinggi. Tetapi anda harus menggunakan harta itu
Dengan CSSketinggian harta anda boleh mengekang ketinggian jika anda menggunakan harta CSS dan juga untuk menentukan apa yang berlaku dengan apa-apa kandungan berlebihan.
Untuk menetapkan ketinggian minimum di atas meja, tulis:
<> gaya = "ketinggian: 30em;" > Jadual ini sekurang-kurangnya 30 inci tinggi.
Kedua-dua atribut dan ruang tambahan di sebelah kiri / kanan (hspace) dan atas / bawah (vspace) jadual. Anda harus menggunakan gaya gaya sebaliknya.
Untuk menetapkan ruang menegak hingga 20 piksel dan ruang mendatar hingga 40 piksel, tulis:
<> gaya = "margin: 20px 40px;" Jadual ini mempunyai ruang kosong sebanyak 20 piksel dan satu 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:
<> gaya = "white-space: nowrap;" > Ini adalah lajur dengan satu tan kandungan. Tetapi, walaupun lebih luas daripada bekas, teks itu tidak perlu dibungkus ke baris seterusnya, tetapi 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 akan memaksa ketinggian menjadi lebih tinggi. Jadi, anda akan melihat bahawa sel penjajaran menegak diselaraskan ke bahagian bawah. <> gaya = "vertical-align: bottom;" > Kandungan di bahagian bawah. Kandungan di tengah.
