Njupuk paling akeh tabel HTML kanthi sinau atribut tabel
Atribut tabel HTML menehi kendali sing luwih akeh marang tabel HTML. Ana akeh kawicaksanan sing kasedhiya kanggo tabel supaya luwih menarik lan ngganti tampilan halaman sampeyan.
Atribusi HTML Unsur
Ing HTML5 unsur iki nggunakake atribut global lan siji atribut liyane:. Lan wis diganti mung duwe nilai 1 utawa kosong (ie wates = ""). Yen sampeyan pengin ngganti jembaré wates, sampeyan kudu migunakaké properti CSS watesan-jembar.
Pirsani ing ngisor iki kanggo mangerteni atribut tabel HTML5 sing bener.
Ana uga sawetara atribut sing dadi bagian saka spesifikasi HTML 4.01 sing wis dadi usang ing HTML5:
- -Gunakake properti padding CSS ing tabel TD lan TH tabel.
- -Gunakake watesan spasi-CSS ing meja.
- -Gunakake gaya CSS watesan-werna: ireng; lan gaya tapel wates ing meja.
- -Gunakake gaya CSS watesan-werna: ireng; lan gaya tapel wates ing unsur sing cocok saka tabel.
- -Kene, sampeyan kudu njlèntrèhaké struktur tabel ing CAPTION utawa nglebokaké tabel sakabèhé ing GAMBAR lan njlèntrèhaké babagan kasebut ing FIGCAPTION. Utawa, sampeyan bisa nyederhanaké struktur meja supaya ora ana panjelasan.
- -Gunakake properti jembar CSS.
Lan siji atribut sing ora bisa ditrapake ing HTML 4.01 lan uga ora ana maneh ing HTML5.
Sinau luwih lengkap babagan HTML 4.01 TABLE Atributes.
- align -Use the margin property CSS instead.
Ana uga sawetara atribut sing ora dadi bagian saka spesifikasi HTML.
Gunakake atribut kasebut yen sampeyan ngerti manawa browser sing sampeyan dhukungan bisa ditangani lan sampeyan ora peduli babagan HTML sah.
- -Gunakake werna-werna latar mburi CSS minangka gantine.
- bordercolor -Gunakake watesan werna CSS minangka watesan.
- bordercolorlight -Gunakake watesan werna CSS minangka standar.
- bordercolordark -Gunakake watesan werna CSS minangka watesan.
- cols - Ora ana alternatif kanggo atribut iki.
- dhuwur -Gunakake dhuwur properti CSS tinimbang.
- -Gunakake margin properti CSS.
- -Gunakake margin properti CSS.
- -Gunakake pamisah spasi putih CSS.
- -Gunakake jeneng CSS kanthi vertikal-obah.
Sinau luwih lengkap babagan Browser Atribut TABLE khusus.
HTML5 TABLE Atributes Element
Minangka kasebut ing ndhuwur, mung ana siji atribut, ngluwihi atribut global, sing sah ing elemen HTML5 TABLE: border.
Atribut wewatesan digunakake kanggo netepake wates antarane meja kabeh lan kabeh sel ing njero. Ana sawetara pitakonan babagan apa sing bakal kalebu ing spesifikasi HTML5, nanging tetep amarga menehi informasi babagan struktur tabel, ngluwihi mung implikasi gaya.
Kanggo nambah atribut wates, sampeyan nyetel angka dadi 1 yen ana wates lan kosong (utawa ninggalake atribut) yen ora ana. Paling browser bakal ndhukung 0 kanggo ora ana watesan, lan nilai integer liyane (2, 3, 30, 500, etc) kanggo ngumumake lebar piksel kasebut ing pixel, nanging iki ora digunakne ing HTML5. Nanging, sampeyan kudu nggunakake sifat gaya watesan CSS kanggo netepake jembar tapel lan gaya liyane.
Kanggo nggawe meja karo wates, tulis:
border = "1" >
Iki minangka tabel sing bates
Ana atribut HTML 4.01 sing lungse ing HTML5. Yen sampeyan nulis ing tulisan HTML 4.01 dokumen, sampeyan bisa sinau, yen, sampeyan ora bisa nglirwakake. Paling saka atribut kasebut nduweni alternatif, sing kasebut ing ndhuwur.
Kita njlèntrèhaké atribut unsur sing bener ing HTML5 (lan HTML 4.01). Iki nggambarake atribut TABLE sing bener ing HTML 4.01, nanging wis ora ana maneh ing HTML5. Yen sampeyan isih nulis HTML 4.01 dokumen, sampeyan bisa migunakake atribut kasebut, nanging sing paling akeh duwe alternatif sing bakal nggawe kaca luwih lawas kanggo mangsa nalika sampeyan pindhah menyang HTML5.
Atribut HTML Valid HTML
Atribut kasebut ing ndhuwur.
Bentenipun mung ing HTML 4.01 saka HTML5 sing bisa nemtokake integer kabeh (0, 1, 2, 15, 20, 200, lan sapiturute) kanggo netepake jembaré wates ing piksel.
Kanggo mbangun meja kanthi wates 5px, tulis:
border = "5" >
Tabel iki nduweni watesan 5px.
Deleng conto rong tabel kanthi wates.
Atribut nemtokake jumlah spasi ing antarane wates sel lan isi sel kasebut. Default minangka rong piksel. Setelake cellpadding menyang 0 yen sampeyan ora pengin spasi ing antarane isi lan wates.
Kanggo nyetel kothak sel kanggo 20, nulis:
cellpadding = "20" >
Tabel iki duwe cellpadding saka 20.
Sel watesan bakal kapisah kanthi 20 piksel.
Ndeleng conto meja karo cellpadding
Atribut nemtokake jumlah spasi ing antarane sel tabel lan isi sèl. Kaya panelpad, standar ditetepake dadi loro piksel, supaya sampeyan kudu nyetel dadi 0 yen sampeyan pengin ora spasi sel.
Kanggo nambah spasi sel menyang tabel, tulis:
cellspacing = "20" >
Tabel iki nduweni selane 20.
Sel bakal kapisah kanthi 20 piksel.
Deleng meja karo cellspacing
Atribut sing ngenali bagéan saka wates ing njaba njaba meja bakal katon. Sampeyan bisa mbingkai tabel ing kabeh papat sisih, sisih siji, ndhuwur lan ngisor, kiwa lan tengen, utawa ora ana.
Punika HTML kanggo tabel kanthi wates sisih kiwa:
frame = "lhs" >
Tabel iki
bakal duwe
mung
sisih kiwa.
Lan conto liyane karo pigura ngisor:
frame = "below" >
Tabel iki nduweni pigura ing ngisor.
Priksa sawetara tabel kanthi pigura
Atribut kasebut mirip karo atribut pigura, mung ngakibatake wates ing sakubenging meja. Sampeyan bisa ngeset aturan kabeh sel, antarane kolom, antarane kelompok kaya TBODY lan TFOOT utawa ora ana.
Kanggo mbangun meja karo baris mung antarane baris, tulis:
rules = "row" >
Tabel 4x4 iki wis
baris ora kolom
digolongake karo
atribut atribut.
Lan liyane karo garis ing antarane kolom:
rules = "cols" >
Iki
a table
ngendi
kolom
ana
disorot
Punika conto saka tabel kanthi aturan
Atribut nyedhiyakake informasi babagan tabel kanggo panelusur layar lan agen panganggo liyane sing mungkin duwe tabel maca sing angel. Kanggo nggunakake atribut ringkesan, sampeyan nulis deskripsi ringkes saka tabel lan sijine minangka nilai atribut. Ringkesan ora bakal ditampilake ing kaca web ing paling browser web standar.
Punika babagan cara nulis tabel prasaja kanthi ringkesan:
summary = "Iki minangka tabel sampel sing ngemot informasi pangisi. Tujuan tabel iki yaiku kanggo nuduhake ringkesan." >
kolom 1 baris 1
kolom 2 baris 1
kolom 1 baris 2
kolom 2 baris 2
Ndeleng meja kanthi ringkesan
Atribut kasebut nemtokake jembaré tabel kasebut ing salah sawijining piksel utawa minangka persentasi saka unsur wadhah. Yen jembar ora disetel, tabel bakal njupuk mung minangka papan sing perlu kanggo nampilake isi kasebut, kanthi jembar maksimum sing padha karo jembar unsur induk.
Kanggo mbangun tabel karo lebar piksel tartamtu, tulis:
width = "300" >
Tabel iki 80% saka jembar saka wadhah iku.
Lan mbangun meja kanthi lebar sing minangka persentasi saka unsur induk, tulis:
width = "80%" >
Tabel iki 80% saka jembar saka wadhah iku.
Deleng conto meja kanthi lebar
HTML sing ora ditemtokake 4.01 TABLE Atribut
Ana siji atribut unsur TABLE sing ora ditepungi ing HTML 4.01 lan liwati ing HTML5: kempal . Atribut iki ngidini sampeyan nyetel endi tabel kasebut kudu ditemokake ing kaca relatif marang teks sing ana ing jejere. Atribut iki wis ditolak ing HTML 4.01, lan sampeyan kudu supaya ora nganggo. Nanging, sampeyan kudu nggunakake properti CSS utawa kiwa-kiwa: otomatis; lan wates-tengen: otomatis; gaya. Properti float menehi asil sing luwih cedhak karo apa sing diwenehi atribut sing diwenehake, nanging bisa mangaruhi cara nampilake isi kaca liyane. Jembar-tengen: otomatis; lan margin-left: auto; yaiku apa sing dianjurake W3C minangka alternatif.
Iki minangka conto sing ora bisa digunakake kanthi nggunakake atribut nugel:
align = "right" >
Tabel iki ditemokake kanthi bener
Tlatah mili ing sisih kiwa
Waca umpan sing ora digunakke nggunakake atribut nugel.
Lan kanggo entuk efek sing padha karo HTML sing sah (ora ditundha), tulis:
style = "float: right;" >
Tabel iki ditemokake kanthi bener
Tlatah mili ing sisih kiwa
Ing ngisor iki njelasake atribut TABLE sing ora dadi bagian saka spesifikasi HTML.
Informasi sadurungé nggambaraké atribut unsur HTML sing sah ing HTML 4.01 nanging wis ora sah ing HTML5.
Ing ngisor iki nggambarake atribut TABLE sing ora bener ing spesifikasi saiki. Yen sampeyan ora peduli yen kaca-kaca sampeyan bisa dideteksi lan pangguna sampeyan nggunakake browser sing ndhukung unsur kasebut, sampeyan bisa nggunakake elemen kasebut. Nanging akeh sing ora didukung ing browser modern utawa duwe alternatif sing luwih standar.
Ora disaranake nggunakake atribut iki ing tabel HTML.
Atribut punika atribut lawas sing disedhiyakake sadurunge CSS dianggo sacara luas. Ngidini sampeyan ngganti werna latar mburi meja. Sampeyan bisa nyetel jeneng werna utawa kode heksadesimal. Atribut iki isih dianggo ing akeh browser, nanging kanggo HTML sing dibuktekake ing mangsa ngarep, sampeyan ora pengin nggunakake, lan nggunakake CSS.
Alternatif sing luwih apik kanggo atribut iki yaiku properti gaya.
Kanggo ngganti warna latar mburi meja, tulis:
style = "background-color: #ccc;" >
Tabel iki nduweni latar mburi abu-abu
Kaya atribut bgcolor, atribut bordercolor ngijini sampeyan ngganti warna atribut. Atribut iki mung didhukung dening Internet Explorer. Nanging, sampeyan kudu nggunakake properti gaya werna wewatesan.
Kanggo ngganti werna ing wates meja, tulis:
style = "border-color: red;" >
Tabel iki duwe wates abang.
Atribut bordercolorlight lan atribut bordercolordark kalebu ing Internet Explorer kanggo ngidini sampeyan nggawe watesan 3D ing meja. Nanging, ing IE8 lan munggah, iki mung didhukung ing Mode Standards lan Mode Kuadrat IE7 . Microsoft nyatakake yen sifat kasebut ora didukung maneh.
Kanggo wektu sing cendhak, atribut cols ing elemen TABLE diusulake kanggo mbantu browser ngerti jumlah kolom sing wis ana. Ing premis, iki bakal bisa nyepetake panulisan tabel gedhe. Nanging iki mung dileksanakake dening Internet Explorer, lan saka IE8 lan munggah, iki mung didhukung ing IE7 Mode Standards lan Mode Quirks.
Amarga ana atribut jembar (usang ing HTML5) akeh wong nganggep ana atribut dhuwur kanggo tabel uga. Nanging amarga tabel diwatesi kanthi jembar isi utawa didefinisikan jembaré ing CSS utawa atribut jembaré, dhuwur ora bisa dibandhingaké. Dadi tinimbang, browser ngidini atribut dhuwur kanggo netepake dhuwur minimum meja. Yen meja luwih dhuwur tinimbang dhuwur, bakal luwih dhuwur. Nanging sampeyan kudu nggunakake properti
Kanthi sifat dhuwur CSS, sampeyan bisa ngliwati dhuwur yen sampeyan nggunakake properti CSS lan uga kanggo nemtokake apa wae sing bakal kelakon.
Kanggo nyetel dhuwur minimal ing tabel, tulis:
style = "height: 30em;" >
Tabel iki minimal 30 dhim.
Rong atribut kasebut ditambah spasi ing sisih kiwa / tengen (hspace) lan ndhuwur / ngisor (vspace) saka meja. Sampeyan kudu nggunakake properti gaya tinimbang.
Kanggo ngeset spasi vertikal nganti 20 piksel lan spasi horisontal nganti 40 piksel, tulis:
style = "margin: 20px 40px;"
Tabel iki nduweni vspace 20 piksel lan hspace 40 piksel.
Atribut punika atribut sing ngemot bab apa isi tabel kudu dibungkus ing pinggir unsur utawa jendhela induk utawa ngeklik gulir horisontal. Nanging, sampeyan kudu netepake ciri bungkus saben sel meja nggunakake properti CSS.
Kanggo nggawe kolom kanthi akeh teks ora mbungkus, nulis:
style = "white-space: nowrap;" > Iki kolom karo ton isi. Nanging sanajan luwih akeh tinimbang isi, teks kasebut ora diwenehake menyang baris sabanjuré, nanging ngemot jendhela browser kanggo nggulung kanthi horizontal kanggo ndeleng kabeh isi.
Akhire, atribut kasebut nemtokake carane isi saben sel kudu selaras vertikal ing sel. Tinimbang atribut iki ora bener, sampeyan kudu nggunakake properti CSS ing saben sel sing pengin ngganti alignment. Sampeyan ora bakal weruh efek saka gaya iki kajaba isi sel kurang saka spasi sing kasedhiya digawe dening liyane, sel sing luwih gedhe.
Kanggo meksa sel supaya obah menyang ngisor (tinimbang tengah, minangka standar), tulis:
Sèl iki luwih dawa tinimbang sithik lan bakal meksa dhuwur dadi luwih dhuwur. Supaya sampeyan bakal weruh manawa sel vertically selaras wis didadekake siji menyang ngisor.
style = "vertical-align: bottom;" > Isi ing ngisor.
Isi ing tengah.