Brug af HTML i en tabel
I HTML er der så mange elementer, oghver af dem er unik på sin egen måde. Bordet er et meget interessant, krævet og seriøst objekt. Takket være det kan du ikke kun give oplysninger i en bekvem form, men også opbygge en hel ramme af webstedet.
Tidligere brugte næsten alle webmastere tabeller til site layout. I første omgang blev tabeller til dette ikke opfundet. Derfor skal du bruge blok div-elementet til site-markup.
Hvis du ikke altid vil forblive en nybegynder,vænne sig til at gøre alt lige med det samme. Dette er meget vigtigt i HTML. I tabellen skal du kun placere de sædvanlige oplysninger (tekst, links, lister, billeder osv.), Og ikke hele webstedet.
Hvordan laver man et HTML-bord?
Et bord er et komplekst element, der består afet stort antal andre elementer. Husk at når du opretter celler eller rækker, skal du altid lægge et lukkekode på én gang. Ellers vil alt flyve væk. Handleren i browseren vil se efter elementets ende, og indtil den finder den, vil alt andet blive medtaget i tabellen. Resultatet bliver grød.
Hvis du skriver et websted i "Notepad", så har du alt hvad du skal gøre med dine hænder. Hvis i den færdige editor, så er der normalt knapper - "indsæt et bord", "indsæt et billede" og så videre.
Eksempel på tabel 2 til 2.
<table width = "100%" border = "1">
<Tr>
<td> teksten til den første celle i den første linje </ td>
<td> teksten til den anden celle i den første linje </ td>
</ tr>
<Tr>
<td> teksten til den første celle i den anden linje </ td>
<td> teksten til den anden celle i den anden linje </ td>
</ tr>
</ table>
Tabellerne <table> og </ table> angiver begyndelsen og slutningen af tabellen. <Tr> og </ tr> tags er begyndelsen og slutningen af linjen. I en linje kan der være så mange celler som muligt, som er defineret af tagene <td> og </ td>.
Hovedregel: Antallet af celler i hver linje skal være det samme. Dette er et bord.
Men som i Word- og Excel-editoren kan celler kombineres med hinanden.
Hvordan fusionere celler i et bord?
For at kombinere skal du bruge attributterne Colspan og Rowspan. Span oversætter som "omfavnelse" eller "overlapning". Den bogstavelige betydning er at dække / dække celler / linjer.
I værdien af denne attribut skal du angive, hvor mange rækker eller celler der vil blive blokeret. Følgende er et godt eksempel på at bruge begge HTML-attributter i en tabel.
I dette eksempel, i den første række, 3celler ved hjælp af colspan = "3" attributten. Derefter blev den første celle i den anden linje strækket i fire linjer. Husk at vi strækker / forener kun i den første celle. Dens ejendom vil blive udvidet yderligere. Alt, hvad der foregår før, vil ikke blive påvirket.
Hvis du har 5 celler og ønsker at flette fra 2 til 4, skal du bare angive attributten colspan = "3" i celle nummer 2.
Bemærk celle nummeret 9 i figuren ovenfor. Der kombinerede de straks celler og linjer. Sådanne handlinger er ikke forbudt.
Se et andet eksempel for at rette op på oplysningerne. Da nogle forvirrer attributter og sommetider kombinerer strenge i stedet for celler.
Design af tabeller
Tag den sædvanlige standard HTML-sag. Bordet har to rækker af to celler hver.
Resultatet af koden er som følger.
Som du kan se, er der ingen effekter. Du kan tilføje en ramme, angive bredden og højden.
Du kan også spille med justeringen. Du kan justere både højde og bredde.
Juster til vandret justering og valign for lodret justering. Her er resultatet.
Tilpasnings- og valignattributterne kan anvendes på hele strengen. Derefter vil alle de celler, der er i det, adlyde disse egenskaber.
Ud over <td> og <tr> tags er der et ekstra tag<Th>. Faktisk er dette en analog af <td>, men den bruges kun i første linje og tjener som en header. Som standard er teksten i <th> centreret og fed.
Sådan forbinder du stilarter til et bord?
Som alle HTML-tags kan tabellenforvandlet gennem stilarter. Du skal angive et stylesheet i hovedet <link rel = "stylesheet" href = "style.css" type = "text / css"> område eller den færdige stil (også i hovedet).
<Chef>
...
<style type = "text / css">
bord {
font-familie: Verdana, Arial, Helvetica, sans-serif;
farve: # 000000;
}
.my_class
{
farve: # 666666;
}
</ style>
...
</ head>
Hvis du kun har angivet et bord, så er denne stilgælder for alle tabeller på siden. Absolut til alle. Men hvis du bruger den anden metode, hvor du angiver et vilkårlig navn med en periode, kan denne stil anvendes til enhver ønsket tabel uden at påvirke andre.
<tabel klasse = "my_class">
Bemærk at klasser kan bruges til både tagmærket og for en bestemt celle eller streng.
<table class = "style_table" width = "100%" border = "1">
<tr class = "style_row1">
<td class = "style_td1"> teksten til den første celle i den første linje </ td>
<td class = "style_td2"> teksten til den anden celle i den første linje </ td>
</ tr>
<tr class = "style_row2">
<td> teksten til den første celle i den anden linje </ td>
<td> teksten til den anden celle i den anden linje </ td>
</ tr>
</ table>
Hvis der er en fejl i navnet på stilen,så bliver resultatet ikke set. Hvis der er fejl i selve stilen, men navnene falder sammen, er der ingen effekt. Hvert komma eller kolon er vigtigt.
Yderligere attributter for tabeller
Hvilke attributter kan skrives i stilklasser? Der er så mange attributter, der gælder for tabeller. Overvej det mest grundlæggende, du har brug for.
tilpasse | Horisontal justering |
valign | Lodret justering |
baggrund | Baggrundsbillede i celle / bord |
bgcolor | Baggrundsfarve i celle |
bordercolor | Bord / celle grænsen farve |
højde | Cellehøjde |
nowrap | Forbyder overførsel af tekst i en linje. |
bredde | Bredde af celle / bord |
Som du kan se, kan du bruge HTML i tabellen med et stort antal "værktøjer".
Smukt skabt ved hjælp af HTML-tabeller. eksempler
Takket være stilarterne kan du oprette forskellige smukke borde. Det hele afhænger af hvad du kan lide og hvordan.
Som du kan se, hvis du bruger HTML-tags, kan tabellen omdannes uden anerkendelse. Mulighedernes grænser bestemmes af din fantasi.
</ p>>
