Txt - Html Tabeli loomine (0)

Tabeli loomine

Tabel paikneb tagide ... vahel.
Element … - määrab tabeli rea. Element … - määrab tabeli lahtri.
Näide 1. Loome HTML - dokumendis järgmise tabeli:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Kirjutame HTML – koodis :
Lahter 1
Lahter 2
Lahter 3
Lahter 4
See tabel näeb välja niimoodi :
Lahter 1 Lahter 2
Lahter 3 Lahter 4
Nagu näeme tabelil puuduvad äärised. Ääriste lisamiseks on vaja kasutada elemendi jaoks kaks atribuuti :
border = … - määrab tabeli äärejoonte jämeduse;
cellspacing = … - määrab tabeli joonte jämeduse.
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Nüüd see tabel näeb välja niimoodi:
Kui me muudame atribuutide väärtuseid ning paneme border = 10 cellspacing = 10, siis saame järgmise tabeli:
On veel kaks atribuuti, mis määravad tabeli ääriste kuju: frame (tabeli äärised) ja rules (tabeli sisemised jooned). Need atribuudid paiknevad sama algtagis . Nende väärtused on järgmised:
frame = void – äärised puuduvad:
= above – ülemine ääris;
= below – alumine ääris;
= hsides – ülemine ja alumine ääris;
= vsides – vasak ja parem ääris;
= lhs – vasak ääris;
= rhs – parem ääris;
= border –kõik äärised;
rules = none – sisemised jooned puuduvad;
= rows – horisontaalsed jooned;
= cols – vertikaalsed jooned;
= all – kõik jooned;
Näide 2. Teeme HTML - dokumendis järgmise tabeli:
Tabelis puuduvad sisemised jooned ja on ainult alumine ja ülemine äärised. Selle tabeli HTML – kood on järgmine:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Elementi kasutatakse veel atribuutidega:
align = left , (right, center ) – tabeli joondus ;
width = … - määrab tabeli laiuse;
bgcolor = … - määrab tabeli tausta värvi;
background = „fail“ – kasutatakse kui tabeli taustaks on pilt.
Näide 3. Teeme HTML - dokumendis järgmise tabeli:
Tabelis on kõik äärised ja jooned, kuid on muutunud tabeli laius ja taust. Kirjutame selle tabeli jaoks koodi:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Element
… - tabeli pealkiri, paikneb alati elemendi sees. Selle elemendi jaoks kasutatakse atribuuti align = top, ( bottom , left, right) – pealkirja joondus.
Näide 4. Lisame eelmise tabeli jaoks pealkirja „Tabel 1“ ja paneme teda alla.
Tabel 1
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Ja nüüd tabel on pealkirjaga:
Elemendil on järgmised atribuudid:
bgcolor = värv - rea tausta värv;
height = … – rea kõrgus;
align = left, (right, center) – horisontaalne andmete joondus reas;
valign = topp , (center, bottom) – vertikaalne andmete joondus reas.
Elemendil on atribuudid:
bgcolor = värv - lahtri tausta värv;
width = … - lahtri leius ;
align = left, (right, center) – andmete joondus lahtris;
Näide 5. Teeme HTML - dokumendis järgmise tabeli:
Lahter 1
Lahter 2
Lahter 3
Lahter 4

Lahtrite ühendamine

Kui on vaja mõned lahtrid tabelis ühendada, siin kasutame elemendi jaoks kaks atribuuti: rowspan ja colspan:
Rowspan = n – ühendab lahtrid horisontaalselt
Colspan= n – ühendab lahtrid vertikaalselt.
Näide 1.
Teeme HTML – dokumendis järgmise tabeli:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Lahter 1 – see on ühendatud lahter, ja ta ühendab kolm veergu . Lahtrid 2, 3, 4 on tavalised .
HTML – koodis see tabel välja näeb niimoodi:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Näide 2.
Teeme HTML – dokumendis järgmise tabeli:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Lahter 5
Lahter 2 – on ühendatud lahter ja ta ühendab kaks rida. Kasutame atribuuti rowspan.
HTML – koodis see tabel välja näeb niimoodi:
Lahter 1
Lahter 2
Lahter 3
Lahter 4
Lahter 5