HTML izmantošana tabulā

Datori

HTML ir tik daudz elementu unkatrs no tiem ir unikāls savā veidā. Tabula ir ļoti interesants, pieprasīts un nopietns priekšmets. Pateicoties tam, jūs varat ne tikai sniegt informāciju ērtā formā, bet arī izveidot visu rāmi vietnē.

Iepriekš gandrīz visi tīmekļa pārziņi izmantoja vietnes izkārtojuma tabulas. Sākotnēji tabulas par to netika izgudrots. Tāpēc vietnes atzīmēšanai jums jāizmanto divu elementu bloks.

Ja jūs nevēlaties vienmēr palikt iesācējs,jāpielāgojas, lai visu izdarītu tūlīt. Tas ir ļoti svarīgi HTML. Tabulā ir jāievieto tikai parasta informācija (teksts, saites, saraksti, attēli utt.), Nevis visa vietne.

Kā izveidot HTML tabulu?

Tabula ir sarežģīts elements, kas sastāv nodaudz citu elementu. Atcerieties, ka, veidojot šūnas vai rindas, vienmēr vajadzētu ievietot aizvēršanas tagu vienlaikus. Pretējā gadījumā viss lidos prom. Apmeklētājs pārlūkprogrammā meklēs elementa beigas un, līdz tas atrod, tabulā tiks iekļauts viss pārējais. Rezultāts būs putra.

Ja jūs rakstāt vietni "Notepad", tad viss, kas jums jādara, ir jūsu rokās. Ja gatavajā redaktorā parasti ir pogas - "ievietot tabulu", "ievietot attēlu" un tā tālāk.

Piemērs 2. līdz 2. tabulai.

<table width = "100%" border = "1">

<tr>

<td> pirmās līnijas pirmās šūnas teksts </ td>

<td> pirmās līnijas otrās šūnas teksts </ td>

</ tr>

<tr>

<td> otrās līnijas pirmās šūnas teksts </ td>

<td> otrās līnijas otrās šūnas teksts </ td>

</ tr>

</ table>

Tabulas <table> un </ table> norāda tabulas sākumu un beigas. <Tr> un </ tr> tagi ir rindas sākums un beigas. Vienā rindiņā var būt pēc iespējas vairāk šūnu, kuras definē tagi <td> un </ td>.

Galvenais noteikums: šūnu skaitam katrā rindiņā jābūt vienādam. Šis ir galds.

html tabulā

Bet, tāpat kā Word un Excel redaktorā, šūnas var kombinēt viena ar otru.

Kā apvienot šūnas tabulā?

Lai apvienotu, izmantojiet atribūtus Colspan un Rowspan. Span tulko kā "aptver" vai "pārklājas". Burtiskā nozīmē ir pārklāt / pārklāt šūnas / līnijas.

Kā apvienot šūnas tabulā

Šī atribūta vērtībā jums jānorāda, cik daudz rindu vai šūnu tiks bloķēts. Turpmākais ir labs piemērs tam, kā tabulā izmantot abus HTML atribūtus.

tags html tabula

Šajā piemērā pirmajā rindā 3šūnas, izmantojot atribūtu colspan = "3". Tad otrās līnijas pirmā šūna bija izstiepta četrās līnijās. Atcerieties, ka mēs stiept / apvienot tikai pirmajā šūnā. Tās īpašums tiks paplašināts. Viss, kas iet iepriekš, netiks ietekmēts.

Ja jums ir 5 šūnas un vēlaties apvienot no 2 līdz 4, tad vienkārši jānorāda atribūts colspan = "3" šūnā 2.

Pievērsiet uzmanību šūnu skaitlim 9 augšā attēlā. Tur viņi uzreiz apvienoja šūnas un līnijas. Šādas darbības nav aizliegtas.

Skatiet citu piemēru, lai noteiktu informāciju. Tā kā daži neskaidri atribūti un dažreiz apvieno stīgas, nevis šūnas.

Stringu apvienošana html

Tabulu izstrāde

Ņem parasto standarta HTML lietu. Tabulā ir divas rindas pa divām šūnām.

tags html tabula

Koda rezultāts būs šāds.

tabula html

Kā redzat, ietekme nav. Jūs varat pievienot rāmi, norādiet platumu un augstumu.

html tabulas atribūti

Varat arī spēlēt ar izlīdzināšanu. Jūs varat pielāgot gan augstumu, gan platumu.

galda izlīdzināšana

Izlīdziniet horizontālo izlīdzinājumu, un verign izlīdzināšanai. Te ir rezultāts.

tabulu izveidošanas piemērs html

Izlīdzināšanas un valign atribūtus var piemērot visai virknei. Tad visas tajā esošās šūnas pildīs šos atribūtus.

Papildus tagiem <td> un <tr> ir papildu tags<th>. Patiesībā šis ir analogs <td>, bet tas tiek izmantots tikai pirmajā rindiņā un kalpo kā galvene. Pēc noklusējuma teksts <th> ir centrā un treknrakstā.

Kā savienot stilus ar galdu?

Kā jebkurš HTML tags, tabula varpārveidots stilu veidā. Galvā ir jānorāda stilu tabula <link rel = "style sheets" href = "style.css" type = "text / css"> apgabals vai pabeigtais stils (arī galvas).

<head>

...

<style type = "text / css">

tabula {

fontu ģimene: Verdana, Arial, Helvetica, sans-serif;

krāsa: # 000000;

}

mans klases

{

krāsa: # 666666;

}

</ style>

...

</ head>

Ja jūs norādījāt tikai tabulu, tad šis stilsattiecas uz visām tabulām lapā. Pilnīgi visiem. Bet, ja jūs izmantojat otro metodi, kurā jūs norādījāt patvaļīgu nosaukumu ar periodu, tad šo stilu var piemērot jebkurai vēlamajai tabulai, neietekmējot citus.

<table class = "my_class">

Ņemiet vērā, ka klases var izmantot gan tabulas tagam, gan konkrētai šūnai vai virvei.

<table class = "style_table" width = "100%" border = "1">

<tr class = "style_row1">

<td class = "style_td1"> pirmās līnijas pirmās šūnas teksts </ td>

<td class = "style_td2"> pirmās rindas otrās šūnas teksts </ td>

</ tr>

<tr class = "style_row2">

<td> otrās līnijas pirmās šūnas teksts </ td>

<td> otrās līnijas otrās šūnas teksts </ td>

</ tr>

</ table>

Ja stila nosaukumā ir kļūda,tad rezultāts nebūs redzams. Ja pašā stilā ir kļūdas, taču nosaukumi sakrīt, efekts nebūs efekts. Katra komats vai kols ir svarīgs.

Papildu atribūti tabulām

Kādus atribūtus var rakstīt stilu klasēs? Tabulās ir tik daudz atribūtu. Apsveriet visvienkāršāko, kas jums nepieciešams.

saskaņot

Horizontālā izlīdzināšana

valign

Vertikālā izlīdzināšana

fons

Fona attēls šūnā / tabulā

bgcolor

Fona krāsa šūnā

bordercolor

Tabulas / šūnas robežas krāsa

augstums

Šūnas augstums

tagadrap

Aizliegts pārvietot tekstu rindiņā.

platums

Šūnas / galda platums

Kā jūs varat redzēt, jūs varat izmantot HTML tabulā ar lielu skaitu "rīki".

html tabulu piemēri

Skaisti izveidoti, izmantojot HTML tabulas. Piemēri

Pateicoties stiliem, jūs varat izveidot dažādus skaistus galdus. Tas viss ir atkarīgs no tā, kas jums patīk un kā.

html tabulu piemēri
Tas ir kā ēdiena gatavošana. Sastāvdaļas ir vienādas, taču ir daudz receptes.

kā izveidot html tabulu

Kā jūs varat redzēt, ja jūs izmantojat HTML tagus, tabulu var pārveidot līdz neatpazīstamībai. Iespēju robežas nosaka jūsu iztēle.