Gitt de meeschten aus HTML Tabellen duerch Léier Table-Attributiounen
HTML Table Attributer Iech e puer Kontrolle iwwer HTML Tabellen. Et gi vill Attributer, fir Dëscher ze maachen fir se méi interessant ze maachen an Äert Ausbléck vun Ärer Säit z'änneren.
HTML TABLE Element Attributiounen
An HTML5 benotzt d'Element déi globale Attributiounen an ee anere Attribut:. A si huet geäntwert fir nëmmen de Wäert vun 1 oder eidel (dh border = "") ze hunn. Wann Dir d'Breet vun der Grenz ännert wëllt, musst Dir d'CSS-Eegeschafte vun der Grenzbreedung benotzen.
Kuckt ënnerhalb fir ze léieren iwwer déi gëlteg HTML5 Table Attributer.
Et gi verschidde Attributer déi Deel vun der HTML 4.01 Spezifizéierung déi am HTML5 verännert gouf:
- -Us de CSS padding property on the table TD- a TH Elementer.
- -Us de CSS-Besëtzer Grenzabstand op den Dësch.
- -Us CSS St. Border-color: black; a Grenzstil op den Dësch.
- -Us CSS St. Border-color: black; a Grenzstil op déi passend Elementer vum Dësch.
- - Stellt Iech d'Struktur vun der Tabelle an enger Kapitt ze beschreiwen oder den ganzen Dësch an enger Figur ze setzen a beschreiwen et an enger FIGCAPTION. Alternativ kéint Dir d'Struktur vum Dësch vereinfachen, sou datt keng Erklärung noutwendeg ass.
- -Us de CSS Breet Eegeschafte.
An ee Attribut dat an HTML 4.01 verwonnt gouf an ass och am HTML5 verännert.
Méi erfier iwwer de HTML 4.01 TABLE Attribute.
- alignéieren - benotzt d'CSS Margin Eegentum.
Et ginn och verschidden Attributer déi net Deel vun enger HTML Spezifikatioun sinn.
Benotzt dës Attribute, wann Dir wësst datt d'Browsers déi Dir ënnerstëtzt kënne mateneen handelen an Dir fannt net iwwer e valabel HTML.
- -Usdeelt d'CSS-Eegeschafte Background-Faarf anstatt.
- bordercolor - benotzt d'CSS-Eigenschaft Grenz-Faarf anstatt.
- bordercolorlight - benotzt d'CSS-Eigenschaft Grenz-Faarf anstatt.
- bordercolordark - benotzt d'CSS-Eigenschaft Grenzfarben anstatt.
- cols -Get keng Alternative fir dësen Attribut.
- Héicht - benotzt d'CSS Eegeschafte statt.
- -Us de CSS Property margin statt.
- -Us de CSS Property margin statt.
- - Benotzt d'CSS-Eigenschaft White-Space statt.
- -Us d'CSS-Eigenschaft vertikal alignéieren anstatt.
Léiert méi iwwer de Browser Besonnesch TITTE Attributiounen.
HTML5 TABLE Element Attributiounen
Wéi mir virdru gesot hunn, ass et nëmmen een Authentifizéierung, ausser d'global Attributer, dat gëlt op engem HTML5 TABLE-Element: Grenz.
D'Grenzschreiwe gëtt benotzt fir eng Grenz ëm de ganze Tableau a all d'Zellen anzeginn. Et gouf e puer Froen, ob et an der HTML5 Spezifikatioun agefouert géif ginn, awer et blouf well se Informatiounen iwwer d'Table Struktur hunn, wéi einfach Stil implikatiounen.
Fir Äert Grenz-Attribut ze addéieren, setze de Wäert op 1 wann et eng Grenz ass a lee (oder de Besëtz ass weg) wann et net geet. Déi meescht Browser wäerten och ënnerstëtzen 0 fir keng Grenz an all aner Integer-Wäerter (2, 3, 30, 500, etc) fir d'Breet Breet an Pixelen ze deklaréieren, awer dat ass onbestänneg an HTML5. Amplaz sollt Dir d'CSS-Grenzimm-Properties benotzt fir d' Grenzbrech an aner Stiler ze definéieren.
Fir eng Tabell mat enger Grenz ze schreiwen, schreift:
border = "1" >
Dëst ass en Dësch mat enger Grenz.
Et gi HTML 4.01 Attributiounen déi op HTML5 verännert sinn. Wann Dir op HTML 4.01 Dokumenter schreift, kënnt Dir se léieren, soss kanns de se ignoréieren. Déi meescht vun dësen Attributer hunn Alternativen, déi et beschriwwen huet.
Mir beschreiwe d'Attributer vum Element, déi an HTML5 gülteg sinn (an HTML 4.01). Dëst beschreift d'TABLE Attribute, déi am HTML 4.01 gëllen sinn, awer sinn am HTML5 verännert. Wann Dir HTML 4.01 Dokumenter schreift, däerf Dir dës Attribute benotzen, mä meescht vun hinnen hunn Alternativen, déi Är Säiten méi zukünfteg präziséiert maachen wann Dir HTML5 verschéckt.
Valid HTML 4.01 Attributiounen
D'Attribut dat mir beschriwwen huet.
Een eenzegen Ënnerscheed am HTML 4.01 aus HTML5 ass datt Dir eng ganz ganz ganz spezifizéiert (0, 1, 2, 15, 20, 200, etc.) fir d'Breet vun der Grenz zu Pixelen ze definéieren.
Fir eng Tabell mat enger 5px Grenz ze bauen, schreift:
border = "5" >
Dës Tabelle huet eng 5px Grenz.
Kuckt een Beispill vun zwee Dëscher mat Grenzen.
D'Attribut definéiert d'Quantitéit vum Raum tëscht Zellränder an den Inhalt vun der Zell. De Standard ass zwee Pixel. Setzt den Cellpadding op 0 wann Dir keng Plaz méi tëscht den Inhalter an d'Grenzen wëllt.
Fir d'Zell padding op 20 ze setzen, schreift:
cellpadding = "20" >
Dës Tafel huet e Cellpadding vun 20.
Zell Grenzregiounen gëtt duerch 20 Pixel getrennt.
Sicht e Beispill vun engem Dësch mat Cellpadding
Den Attribut definéiert d'Quantitéit vum Raum tëscht den Dëschzellen an dem Zell Inhalt. Wéi Cellpadding, ass de Standard um 2 Pixel gespaart, sou datt Dir se op 0 setze musst wann Dir kee Zellabstand wëllt.
Fir Zelleabréckung op ee Dësch ze maachen, schreift:
cellspacing = "20" >
Dës Tafel huet e CellSpacing vun 20.
Zellen gi vun 20 Pixelen getrennt.
Kuckt e Table mat CellSpacing
De Attribut identifizéiert datt Portioune vun der Grenz ronderëm de Buedem vum Dësch gesi ginn. Dir kënnt Äre Table op all véier Sëtzer, eegene Säit, Top an Ënnerlag, lénks a riets, oder kee.
Hei ass d'HTML fir e Dësch mat nëmmen der lénkser Grenzgrenz:
Frame = "lhs" >
Dës Tabelle
wäerte hunn
nëmmen de
lénks Säit geraf.
An e weider Beispill mat dem ënneschte Frame:
Frame = "ënnen" >
Dës Tabelle huet e Frame op der Säit.
Kuckt Iech Dëscher mat Frames
D'Attribut ass ähnlech mat dem Frame Attribut, eréischt aus der Grenzregioun ëm d'Zellen vum Dësch. Dir kënnt Regelen op all Zelle wielen, tëschent Spalten, tëschent Gruppen wéi TBODY an TFOOT oder keen.
Fir eng Table mat Zeilen nëmmen tëscht den Zeilen ze bauen, schreift:
rules = "Reihen" >
Dës 4x4 Dësch huet
Zeilen net ze Säulen
mat der skizzéiert
Regelen Attribut.
An eng aner mat Zeilen tëschent de Säulen:
rules = "cols" >
Dëst ass
enger Tabelle
wou de ass
Säulen
sinn
markéiert
Hei ass e Beispill vun aa-Dësch mat Regelen
D'Attribut liefert Informatiounen iwwer den Dësch fir Schreifend Lieser an aner Benotzer Agenten, déi Problemer hunn Tabellen ze liesen. Dir benotzt de summary Attribut, schreift Dir eng kuerz Beschreiwung vun der Tabelle a gitt dat als de Wäert vum Attribut. D'Iwwersiichtsbeschreiwung wäert net op der Websäit an de meescht Standard-Browser benotzen.
Hei kënnt Dir e einfachen Dësch schreiwen mat enger Zusammenfassung:
Summary = "Dëst ass eng Prouf Tabelle, déi Fillerinformatioun enthält. Den Zweck vun dëser Tabelle ass fir Iech eng Summary ze weisen." >
Kolonn 1 Zeil 1
Kolonn 2 Zeil 1
Spalte 1 Zeil 2
Kolonn 2 Zeil 2
Kuckt eng Tabelle mat enger Zesummefaassung
D'Attribut definéiert d'Breet vum Dësch an entweder Pixelen oder als Prozentsatz vum Containerelement. Wann d'Breet net festgeluegt ass, gëtt den Dësch just sou vill Plaz wéi et muss den Inhalt unzepassen, mat enger maximaler Breed déi selwecht wéi déi Breet vum Elterendeel sinn.
Fir eng Tafel mat enger speziféierter Breet a Pixelen ze bauen, schreift:
width = "300" >
Dës Tabelle ass 80% vun der Breet vum Container ass et.
A fir eng Tabell mat enger Breet ze bauen déi e Prozentsaz vum Elterenelement bitt, schreift:
Breed = "80%" >
Dës Tabelle ass 80% vun der Breet vum Container ass et.
Kuckt e Beispill vun engem Dësch mat enger Breet
Deprecated HTML 4.01 TABLE Attribut
Et ass e Attribut vum TABELLE Element, deen am HTML 4.01 verwonnt gëtt an obsolet am HTML5: alignéiert . Dëst Attribut léisst Dir festleeën, wou d'Tabelle soll op der Säit relativ mam Text sinn, deen niewent deems. Dëst Attribut ass am HTML 4.01 virgesinn, an Dir sollt et net benotzen. Stellt Iech d'CSS-Eigenschaft oder d'Margin-Left: Auto; a Randspuer: auto; Stiler. D'Schwämm Immobilie verdeelt Iech e Resultat, deen méi no wéi d'Align Attribut ass, awer et kann beaflossen d'Aart a Weis wéi de Rescht vun den Inhalter vun der Säit. D'Margin-Recht: Auto; an Margin-Left: Auto; Wat d'W3C recommandéiert ass als Alternativ.
Hei ass e verëffentlecht Beispill mat dem Align Attribut:
align = "right" >
Dës Tabelle ass richteg ausgeriicht
Text fléisst ronderëm der lénks
Kuckt e verëffentlecht Beispill mat dem Align Attribut.
A fir dee selwechte Effekt mat gültege (net vergewëssert) HTML ze schreiwen, schreift:
Style = "Schwämm:"; >
Dës Tabelle ass richteg ausgeriicht
Text fléisst ronderëm der lénks
Déi folgend Erklärung TABLE Attributiounen, déi net Deel vun enger HTML Spezifikatioun sinn.
Déi virdrun Informatiounen beschreiwt Attribute vum HTML Element, déi am HTML 4.01 gëllen sinn awer amplaz vun HTML5.
Déi folgend beschreift TABLE Attribute, déi net an enger aktueller Spezifikatioun gëlteg sinn. Wann Dir keng Gedanken iwwer d'Validatioun vun Äre Säiten an Är Benotzer benotzt een Browser, deen dës Elemente ënnerstëtzt, da kënnt Dir dës Elementer benotzen. Déi meescht vun hinnen sinn entweder net ënnerstëtzt a modernen Browser oder hunn Alternativen déi méi Standardkonform sinn.
Mir recommandéieren dës Attributer net op Äre HTML Tabellen ze benotzen.
D'Attribut ass en alen Attribut dat virum CSS agefouert gouf. Et erlaabt Iech d'Backgroundfaarf vum Dësch ze änneren. Dir kënnt e Faarf oder e hexadezimalen Code setzen. Dëst Attribut ass ëmmer nach e bësse Browser, mä fir zukünfteg préifen HTML, da sollt Dir et net benotzen an CSS benotze statt.
Déi bessere Alternativ zu deem Attribut ass d'Stilimm.
Fir d'Backgroundfaarf vun engem Dësch ze änneren, schreift:
style = "background-color: #ccc;" >
Dës Tafel huet e groen Hintergrund
Ähnlech mam Attribut bgcolor ass de Attribut vum bordercolor attribute déi Faarf vum Attribut änneren. Dëst Attribut ass nëmme vum Internet Explorer ënnerstëtzt. Amplaz sollt Dir d'Grenz-Faarfstil eegent benotzen.
Fir d'Faarf vun der Grenz vun der Tabelle ze änneren, schreift:
style = "border-color: red;" >
Dës Tafel huet eng rout Grenz.
D'Grenzbärlight an d'Grenzkierchark Attributë waren op Internet Explorer integréiert, fir datt Dir eng 3D Grenz ëm Är Tafel erstallt. Awer wéi IE8 an up, ass dëst nëmmen am IE7 Standards Modus a Quirks Modus ënnerstëtzt . Microsoft weist datt dës Properties méiënneg ënnerstëtzt ginn.
Fir eng kuerz Zäit ass de Attribut vun Cols am TABLE-Element proposéiert fir Browsers ze hëllefen, wéi vill Spalten eng Tabelle haten. D'Viraussetzung war datt dëst hëllefe fir d'Renderë vu grouss Dëscher ze beschleunegen. Et gouf awer nëmmen vum Internet Explorer implementéiert, a wéi vum IE8 a up, ass dëst nëmmen am IE7 Standards Mode a Quirks Modus ënnerstëtzt.
Well et ass e Breedtribueg (ëntwéckelt an HTML5) gi vill Leit ugeholl datt et en Héichtattribut fir Dëscher ass. Awer Tëschele mat der Breite vun hirem Inhalt oder der definéierter Breet am CSS oder Breedtributt, kann d'Héich net matenee verbonnen sinn. Sou hunn d'Browser d'Héicht attribut fir d'minimale Héicht vun der Tabell ze definéieren. Wann d'Dësch méi grouss war wéi déi Héicht, da géif et méi héich ginn. Awer Dir sollt d'Besëtz benotzen
Mat der CSS Héicht Immobilie kanns de d'Héicht limitéieren wann Dir d'CSS Eegeschafte benotzt fir ze definéieren wat mat all Iwwerschreiden zoustänneg ass.
Fir déi minimale Héicht op engem Dësch ze setzen, schreift:
Stil = "Héicht: 30em;" >
Dës Tabelle ass op d'mannst 30 Ems héich.
Déi zwee Attributiounen an en ergänzende Raum ëm d'lénks / riets Säit (hspace) an den Top / Bottom (vspace) vun der Tabelle. Dir sollt d'Stil eigne benotzen.
Fir de vertikale Raum op 20 Pixelen an den Horizontale Plaz op 40 Pixel ze setzen, schreift:
style = "margin: 20px 40px;"
Dës Tabelle huet e vSpace mat 20 Pixelen an en Hpace vu 40 Pixelen.
D'Attribut ass en booleschen Attribut dat definéiert ob de Contenu vun der Tabell am Rand vum Materiallelement oder op enger Fënster zoumaachen oder d'horizontalen Scrollen kämpfen. Stellt Iech d'Verwécklungseigenschaften vun all Tableau mat der CSS-Eigenschaft fest.
Fir eng Kolonn mat vill Text net ëmzebréngen, schreift:
style = "white-space: nowrap;" > Dëst ass eng Kolonn mat enger Tonne vum Inhalt. Mä och wann et méi breeder ass wéi de Container de Text däerf net op d'nächst Zeil ëmklappen, awer zwëschen de Browserfenster horizontal fir den Inhalt ze gesinn.
Zum Schluss definéiert d'Attribut datt d'Inhalter vun all Zelle vertikal an der Zelle sinn. Stellt dësen ongültege Attribut, sollt Dir d'CSS-Eigenschaft op all Zelle benotze fir datt Dir d'Ausrichtung änneren wëllt. Dir kënnt d'Effekter vum Stil net beacht hunn, ausser de Inhalt vun der Zille manner wéi de verfügbaren Raum, deen vun anere gréissere Zellen geschafe gëtt.
Fir eng Zuel ze zwéngen, op déi dräifach (an éischter wéi d'Mëtt, als Default) ze richten, schreift:
Dës Zell ass méi laang wéi d'Rescht an esou wäert d'Héichkraaft awer méi grouss ginn. Dir wäert gesinn, datt d'vertikal zrënneg Zelle un der Uewen ausgeriicht ass.
style = "vertikal-align: bottom"; > Inhalt am Ground.
Inhalt an der Mëtt.