HTML naudojimas lentelėje

Kompiuteriai

HTML yra tiek daug elementų, irkiekvienas iš jų yra unikalus savaip. Stalas yra labai įdomus, reikalaujantis ir rimtas dalykas. Dėl to galite ne tik pateikti informaciją patogia forma, bet ir sukurti visą svetainės rėmelį.

Anksčiau beveik visi žiniatinklio valdytojai naudojo svetainių išdėstymo lenteles. Iš pradžių tokios lentelės nebuvo išrastos. Todėl svetainės žymėjimui reikia naudoti bloko div elementą.

Jei nenorite visada likti pradedančiuoju,priprasti prie visko iš karto. Tai labai svarbu HTML. Lentelėje turite įdėti tik įprastą informaciją (tekstą, nuorodas, sąrašus, vaizdus ir tt), o ne visą svetainę.

Kaip sukurti HTML lentelę?

Stalas yra sudėtingas elementas, kurį sudarodaugybė kitų elementų. Atminkite, kad kurdami ląsteles ar eilutes visada uždarykite žymą vienu metu. Priešingu atveju viskas skris. Naršyklės tvarkyklė ieškos elemento pabaigos ir, kol pamatysite, visa kita bus įtraukta į lentelę. Rezultatas bus košė.

Jei rašote "Užrašų knygelėje" esančią svetainę, tuomet viskas turi būti susijusi su tavo rankomis. Jei baigtoje redaktoriuje paprastai yra mygtukai - "įterpti lentelę", "įterpti vaizdą" ir tt

2-2 lentelių pavyzdys.

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

<tr>

<td> pirmosios eilutės pirmosios eilutės tekstas </ td>

<td> pirmosios eilutės antrojo elemento tekstas </ td>

</ tr>

<tr>

<td> antrosios eilutės pirmosios eilutės tekstas </ td>

<td> antrosios eilutės antrojo teksto tekstas </ td>

</ tr>

</ table>

Žymos <table> ir </ table> rodo lentelės pradžią ir pabaigą. Žymos <tr> ir </ tr> yra linijos pradžia ir pabaiga. Vienoje eilutėje gali būti tiek daug langelių, kuriuos apibrėžia žymės <td> ir </ td>.

Pagrindinė taisyklė: ląstelių skaičius kiekvienoje eilutėje turi būti vienodas. Tai yra stalas.

html lentelėje

Tačiau, kaip ir "Word" ir "Excel" redaktoriuose, ląstelės gali būti derinamos viena su kita.

Kaip sujungti langelius į lentelę?

Norėdami sujungti, naudokite Colspan ir Rowspan atributus. "Span" reiškia "apsirengimas" arba "sutapimas". Žodinė prasmė yra padengti / padengti langelius / linijas.

Kaip sujungti langelius į lentelę

Šio atributo reikšme turite nurodyti, kiek eilučių ar ląstelių bus užblokuotas. Toliau pateikiamas geras pavyzdys, kaip abu HTML elementai naudojami lentelėje.

žymes html lentelę

Šiame pavyzdyje pirmoje eilutėje 3ląstelės, naudojant atributą colspan = "3". Tada pirmoji antrosios linijos ląstelė ištempta į keturias linijas. Atminkite, kad mes plečiame / jungiame tik pirmąją ląstelę. Jos turtas bus pratęstas. Viskas, kas vyks anksčiau, nebus paveiktas.

Jei turite 5 ląstelių ir norite sujungti nuo 2 iki 4, tuomet tiesiog reikia nurodyti atributą colspan = "3" lange Nr. 2.

Pažymėkite ląstelių skaičių 9 aukščiau esančiame paveikslėlyje. Ten jie iš karto sujungė ląsteles ir linijas. Tokie veiksmai nėra draudžiami.

Pažiūrėkite į kitą pavyzdį, kaip išspręsti šią informaciją. Kadangi kai kurie supainiojami atributai ir kartais derina strings vietoj ląstelių.

Styginių derinimas html

Lentelių projektavimas

Paimkite įprastą, standartinį HTML atvejį. Stalas turi dvi eilutes iš dviejų langelių.

žymes html lentelę

Kodo rezultatas bus toks.

lentelė html

Kaip matote, poveikis nėra. Galite pridėti rėmelį, nurodykite plotį ir aukštį.

html lentelės atributus

Taip pat galite žaisti su lygiu. Galite suderinti tiek aukštį, tiek plotį.

stalo išlyginimas

Išlyginkite horizontaliai ir vertikaliam lygiavimui. Čia yra rezultatas.

pavyzdys kurti lenteles html

Lyginimo ir valigo atributai gali būti taikomi visai eilutei. Tada visos joje esančios ląstelės taps tokiais požymiais.

Be žymių <td> ir <tr> yra papildoma žyma<th>. Tiesą sakant, tai yra analogas <td>, tačiau jis naudojamas tik pirmoje eilutėje ir tarnauja kaip antraštė. Pagal numatytuosius nustatymus tekstas <th> yra centre ir paryškintas.

Kaip prijungti stilius prie stalo?

Kaip ir visos HTML žymos, lentelė galipertvarkyta per stilių. Galite nurodyti lentelėje stilių <link rel = "stylesheet" href = "style.css" type = "text / css"> plotas arba baigtas stilius (taip pat ir galvos).

<head>

...

<style type = "text / css">

stalas {

font-family: Verdana, Arial, Helvetica, sans-serif;

spalva: # 000000;

}

mano klasė

{

spalva: # 666666;

}

</ style>

...

</ head>

Jei nurodėte tik lentelę, tai šis stiliusTaikoma visoms lentelės lentelėje. Visiškai visiems. Tačiau, jei naudojate antrąjį metodą, kuriame nurodote savavališką pavadinimą su laikotarpiu, šis stilius gali būti taikomas bet kuriai pageidaujamai lentelei, nepažeidžiant kitų.

<table class = "my_class">

Atkreipkite dėmesį, kad klasės gali būti naudojamos tiek lentelės žymei, tiek tam tikrai langeliai ar eilutės.

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

<tr class = "style_row1">

<td class = "style_td1"> pirmosios eilutės pirmosios eilutės tekstas </ td>

<td class = "style_td2"> pirmosios eilutės antrojo elemento tekstas </ td>

</ tr>

<tr class = "style_row2">

<td> antrosios eilutės pirmosios eilutės tekstas </ td>

<td> antrosios eilutės antrojo teksto tekstas </ td>

</ tr>

</ table>

Jei stiliaus pavadinime yra klaida,tada rezultatas nebus matomas. Jei pačiame stiliumi yra klaidų, tačiau vardai sutampa, poveikis nebus. Kiekviena kablelis arba dvitaškis yra svarbus.

Papildomos lentelių atributai

Kokius atributai galima parašyti stiliaus klasėse? Yra tiek daug atributų, kurie taikomi lentelėms. Apsvarstykite pagrindinius, ko jums reikia.

suderinti

Horizontalus išlyginimas

Valigas

Vertikalus išlyginimas

fonas

Fono vaizdas ląstelėje / lentelėje

bgcolor

Fono spalva ląstelėje

bordercolor

Stalo / ląstelių sienų spalva

aukštis

Ląstelių aukštis

dabarapas

Uždrausti teksto apvyniojimą virve.

plotis

Kameros / lentelės plotis

Kaip matote, galite naudoti HTML lentelėje su daugybe "įrankių".

html lentelių pavyzdžiai

Gražus sukurtas naudojant HTML lenteles. Pavyzdžiai

Dėl stilių galite kurti įvairius gražius stalus. Viskas priklauso nuo to, kas jums patinka ir kaip.

html lentelių pavyzdžiai
Tai kaip virimas. Sudedamosios dalys yra vienodos, tačiau yra daug receptų.

kaip sukurti html lentelę

Kaip matote, jei naudojate HTML žymes, lentelė gali būti pakeista ne iki galo. Galimybių ribas lemia jūsų vaizduotė.