Hur använder man egenskapen 'display' för att representera en tabell?
Tabellen nedan ger dig relationen mellan en ' tabell' -tagg och motsvarande CSS-egenskap som stöds för att representera samma element. Allt du behöver göra när du skapar en tabell är att istället för HTML- taggen ' tabell ', bara använda taggen ' div ' och lägga till motsvarande CSS för att visa en tabell.
<tabell> | {display:table} |
<tr> | {display: table-row} |
<huvud> | {display: table-header-group} |
<tbody> | {display: table-row-group} |
<tfot> | {display: table-footer-group} |
<col> | {display: table-column} |
<colgroup> | {display: table-column-group} |
<td>, <th> | {display: table-cell} |
<bildtext> | {display: table-caption} |
Steg 1: Skapa Master Div för bordet
HTML
CSS
Steg 3: Skapa en tabelltext, sidhuvud, brödtext, sidfot
HTML
CSS
Steg 3: Skapa tabellrader, cell, huvudcell, fotcell
HTML
CSS
Resultat
Steg 4: lägg till rullningslisten i tabellen
HTML
CSS
JS