Kung itinakda mo ang lapad ng talahanayan bilang isang katangian. Pag-uugali ng mga walang laman na cell

lumilikha ng isang string at ang tag :

lumilikha ng isang table header, ito ay matatagpuan sa loob ng tag - kaagad pagkatapos ng pambungad na tag. Ang default na header ay matatagpuan sa itaas ng talahanayan at nakahanay sa gitna nito.

Pamagat ng talahanayan

1st cell ng 1st row	2nd cell ng 1st row
1st cell ng 2nd row	2nd cell ng 2nd row

Pag-align ng talahanayan. Pag-align ng mga nilalaman ng cell

Ang align attribute ng tag ay ginagamit para i-align ang table.

.

Gamit ang align attribute, maaari mong ilagay ang talahanayan sa kaliwa o kanan (align= "left" at align= "right") bahagi ng browser window ( elemento ng magulang) o sa gitna nito (align="center" ).

Pag-align ng mga nilalaman ng mga linya ( tag

) at mga cell ( tag , ang paglikha ng isang hilera ng talahanayan ay walang mga katangian ng hieght at lapad. Ang taas ng isang hilera ay tumutugma sa taas ng mga cell na matatagpuan dito. At ang lapad ng hilera ay katumbas ng lapad ng talahanayan.

Ang mga halaga ng taas at lapad ay tinukoy sa mga pixel o porsyento na nauugnay sa libreng espasyo. Upang magtakda ng mga halaga:

Tukuyin ang isang positibong integer. Sa kasong ito, ang laki ay tutukuyin sa mga pixel;

Tukuyin ang isang positibong integer na sinusundan ng isang % na simbolo.

Kung ang mga nilalaman ng isang talahanayan o cell ay lumampas sa tinukoy na mga dimensyon, sila ay hindi papansinin ng browser, at ang mga bagong dimensyon ay awtomatikong pipiliin alinsunod sa mga sukat ng nilalaman.

) pahalang at pagtukoy sa lokasyon nito - sa itaas o ibaba ng talahanayan.

Bilang default, ang mga nilalaman ng cell ay naka-left-align nang pahalang at naka-center nang patayo.

Taas at lapad ng talahanayan at mga cell

Mga default na laki ( taas at lapad) ang parehong mga talahanayan at mga cell ay nagbabago depende sa laki ng kanilang mga nilalaman.

Ngunit ang taas at lapad ng parehong talahanayan at ang mga indibidwal na mga cell nito ay maaaring itakda nang tahasan - gamit ang hieght at lapad na mga katangian, ayon sa pagkakabanggit.

Tag

) pahalang ay ginagawa din gamit ang align attribute, at patayo gamit ang valign attribute: Ang align attribute ay tumatanggap ng mga values ​​left , right , center and justify , na tumutukoy sa pagkakahanay ng mga nilalaman ng mga row at cell sa kanilang kaliwa, kanan, gitna at lapad, ayon sa pagkakabanggit; Ang katangiang valign, na kumukuha ng mga value sa itaas, ibaba, at gitna, ay tumutukoy sa pagkakahanay ng mga nilalaman ng mga hilera at mga cell sa kanilang tuktok, ibaba, at gitnang mga gilid, ayon sa pagkakabanggit. Ang align attribute ay nagsisilbi rin upang ihanay ang header ( tag

>

Tulad ng makikita mula sa halimbawa: sa pamamagitan ng pagtukoy sa lapad ng isa sa mga cell sa isang column, sa gayon ay tinukoy mo ang lapad ng buong column; at sa pamamagitan ng pagtukoy sa taas ng isa sa mga cell sa isang hilera, tinukoy mo ang taas ng buong row.

Mga hangganan ng mesa at cell

Ang talahanayan at ang bawat isa sa mga cell nito ay may sariling mga hangganan, na hindi nakikita bilang default.

katangian ng tag ng hangganan

nagbibigay-daan sa iyo na gawing nakikita ang mga hangganan at itakda ang kapal ng mga ito. Ipapakita nito ang mga hangganan sa paligid ng talahanayan at sa paligid ng bawat cell.

kapal ng hangganan ( o mga frame) ay tinukoy sa mga pixel. Ang halaga ng katangian ng hangganan ay isang positibong integer. Kung ang katangian ng hangganan ay tinukoy nang walang halaga, ang kapal ng hangganan ay magiging 1 pixel.

Ang kapal ng hangganan ay nakatakda lamang para sa talahanayan. Ang kapal ng hangganan sa paligid ng mga cell ay palaging 1 pixel ( o nawawala).

Bilang default, lumalabas ang border na may 3D effect at itim.

Ang katangian ng bordercolor ay tumutukoy sa kulay ng hangganan at inaalis ang 3D na epekto. Maaaring gamitin ang katangian upang itakda ang kulay ng hangganan ng talahanayan ( tag

), mga string ( tag ) o mga cell ( tag - linya ng talahanayan ng html
- column (cell) ng isang html table.

Ngayon subukan nating pagsamahin ang lahat ng mga tag sa isang talahanayan. Upang gawin ito, gagawa kami ng isang html table na binubuo ng dalawang row at tatlong column:

Ang html table na ito ay napakadaling gawin. Una, ilagay natin ang mga tag ng talahanayan mismo, kung saan inilalagay namin ang kinakailangang bilang ng mga hilera (sa aming halimbawa, 2 mga hilera):

). Ang katangian ng bordercolor ay hindi sinusuportahan ng lahat ng mga browser at samakatuwid ay hindi inirerekomenda. Upang itakda ang kulay ng hangganan, mas mahusay na gumamit ng mga estilo ( nasa CSS na ito). Ang katangian ng hangganan ay hindi tinukoy. Samakatuwid walang mga hangganan. Ang kapal ng hangganan ng talahanayan ay 3 pixel. Ang mga cell ay may 1 pixel na hangganan! Pagpapakita ng bahagyang hangganan Maaaring bahagyang ipakita ang hangganan ng talahanayan at hangganan sa paligid ng mga cell. Katangian ng tag ng frame tumutukoy kung saan iguguhit ang hangganan ng talahanayan. Tinutukoy ng attribute ng rules kung paano ipakita ang mga hangganan ng cell. "500px" frame="hsides" rules="cols" > Naka-install pahalang mga hangganan ng talahanayan AT ang mga hangganan ay ipinapakita sa pagitan ng mga hanay Padding sa loob at labas ng mga cell Kapag nag-format ng mga talahanayan sa HTML, para sa isang visual na representasyon ng ilang impormasyon at ang maginhawang pagdama nito, maaaring kailanganin ito kapaki-pakinabang na paggamit padding sa loob at labas ng mga cell. Panloob na padding - mula sa mga hangganan ng mga cell hanggang sa kanilang mga nilalaman, ay itinakda ng katangian ng cellpadding ng tag . Mga panlabas na padding - ang distansya sa pagitan ng mga hangganan ng mga katabing cell at ang distansya mula sa mga hangganan ng cell hanggang sa hangganan ng talahanayan, ay itinakda ng katangian ng mga cellpacing ng tag . Ang mga integer ay tinukoy bilang mga halaga ng katangian mga positibong numero, na tumutukoy sa distansya sa mga pixel. Distansya mula sa mga nilalaman ng cell sa kanilang mga hangganan ay 10 pixels Distansya sa pagitan ng mga cell at mula sa mga cell sa hangganan ng talahanayan ay 25 pixels Pinagsasama-sama ang mga cell Kapag nagdidisenyo at nagfo-format ng mga talahanayan sa HTML, madalas mong kailangang pagsamahin ang mga katabing cell. At kung may ganoong pangangailangan, dapat mong gamitin ang mga katangian ng colspan at rowspan ng tag	. Tinutukoy ng attribute na colspan ang bilang ng mga cell na isasama nang pahalang, at ang attribute na rowspan ay tumutukoy sa bilang ng mga cell na isasama nang patayo. Ang parehong mga katangian ay may katuturan kung ang talahanayan ay binubuo ng maraming mga hilera. 1 2 3 4 1 2 3 4 Background ng table. Background ng cell ng talahanayan Sa HTML, posibleng magtakda ng pangkalahatang background para sa buong talahanayan, gayundin ng background para sa hiwalay na napiling cell. Katangian ng tag ng background tumutukoy sa larawang magiging background na larawan ng talahanayan. Tinutukoy ng value ng katangian ang address ng image file - absolute o relative path sa file (). katangian ng tag ng bgcolor nagtatakda ng kulay ng background ng talahanayan. Maaaring itakda ang kulay sa dalawang paraan () Gamit ang parehong mga katangian, maaari mong itakda ang background na imahe at kulay ng background para sa anumang table cell ( tag , At . Maaaring gamitin ang alinman sa mga ito upang baguhin ang ilang katangian ng isa o higit pang mga hilera ng talahanayan: muli nitong inihanay ang mga nilalaman ng mga cell sa mga hilera nang pahalang at patayo - gamit ihanay ang mga katangian at i-valily ayon sa pagkakabanggit; at pagtatakda ng kulay ng background ng mga cell gamit ang katangiang bgcolor. Kapag ginagamit ang mga tag na ito, dapat mong malaman ang ilang mga nuances na tumutukoy sa mga pagkakaiba sa pagitan ng mga ito. Mga tag At dapat ilagay bago ang tag , kaagad pagkatapos ng pambungad na tag ng talahanayan ). Dark pink ang kulay ng background ng table. Ang larawan sa background ng isang indibidwal na cell ay ang kalangitan! Alalahanin din natin ang pagkakaroon ng cols attribute ng tag , na nagsasabi sa browser ng bilang ng mga column sa talahanayan. Ang paggamit ng cols attribute ay nagbibigay-daan sa browser na ipakita ang mga nilalaman ng talahanayan nang mas mabilis. Pag-edit ng talahanayan Sa seksyong ito, titingnan natin ang mga tag na ginagamit kapag nag-e-edit ng ilang elemento ng talahanayan nang sabay-sabay. Ang mga tag na ito ay maaaring hatiin sa dalawang pangkat. Kasama sa unang pangkat ang mga tag At . Halos magkapareho ang mga ito at nagsisilbing magtakda ng ilang mga katangian at baguhin ang mga katangian ng isa o higit pang mga column ng talahanayan. Ang isa sa mga tag na ito ay inilalagay kaagad pagkatapos ng tag . Sabihin nating isa itong tag . Gamit ang katangian ng span ng isang tag ipahiwatig ang bilang ng mga column kung saan ilalapat ang align, valign, o width na mga katangian ( pag-align ng mga nilalaman ng mga cell ng column nang pahalang, patayo o pagtatakda ng mga lapad ng column). Kung ang katangian ng span ay nasa tag ay nawawala, pagkatapos ay ang mga katangian ng isa - ang unang column ng talahanayan - ay mababago. Sa pangalawang pagkakataon na ginamit mo ang tag ang mga katangian ay nakatakda para sa mga sumusunod ( susunod - kung nawawala ang katangian ng span) mga haligi ng talahanayan, atbp. "2" lapad="70px" > 1 2 3 4 5 1 2 3 4 5 Kasama rin sa pangalawang pangkat ng mga tag ang mga tag na halos magkapareho sa isa't isa . Mga string na inilagay sa tag ay ipinakita sa tuktok ng talahanayan, at ang mga hilera ay nakapaloob sa tag ay matatagpuan sa ibaba ng talahanayan. Ang parehong mga tag ay maaari lamang ilapat nang isang beses sa loob ng parehong talahanayan. Tag maaaring magamit nang maraming beses sa loob ng isang tag . "right" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Ano ang mga HTML na talahanayan at bakit kailangan ang mga ito? html na mga talahanayan- ito ay isa sa mga pinakapangunahing bahagi ng bawat pahina ng html at, nang naaayon, bawat site. Halimbawa, ang buong site ay binubuo ng mga talahanayan: mga larawan, mga teksto, mga link, mga form sa pagpaparehistro - lahat ay inilalagay na may kaugnayan sa bawat isa gamit ang mga html na talahanayan (sa katunayan, ang buong site ay matatagpuan din sa isang malaking talahanayan). 2. Anong mga tag ang mayroon ang mga html table? Mga tag, ang pagtukoy sa html table ay nakasulat tulad nito: Ngunit dahil alam namin na ang lahat ng mga talahanayan ay binubuo ng mga row at column (mga cell), kaya kailangan din naming magtakda ng mga tag para sa kanila:

Pagkatapos ay hinati namin ang bawat row sa mga cell gamit ang mga tag ng column:

- cell 1.1
- cell 1.2
- cell 1.3


- cell 2.1
- cell 2.2
- cell 2.3

Sa katunayan, ang unang digit sa mga inskripsiyon ay ang numero ng hilera, at ang pangalawa ay ang numero ng cell (1x2 - unang hilera, pangalawang cell, atbp.).

3. Paano itakda ang kulay ng background ng mga html table?

Ngayon, alamin natin kung paano itakda nang hiwalay ang background ng talahanayan o bawat cell.

Kaya, upang itakda ang background ang katangian ay ginagamit bgcolor="background_color".

Halimbawa, kung kailangan naming magtakda ng isang kulay para sa buong sign, gagawin namin ito tulad nito:

bgcolor="background_color">

- cell 1.1
- cell 1.2
- cell 1.3


- cell 2.1
- cell 2.2
- cell 2.3

Halimbawa, kung kailangan mong gumawa ng isang senyas kulay dilaw, pagkatapos ay isusulat namin:

Kung kailangan itakda ang kulay ng background para sa row html table, pagkatapos ay ang attribute bgcolor="background_color" ilapat sa tag

Kailangan nating itakda ang lapad ng talahanayan, ngunit kung minsan kailangan nating baguhin ang lapad ng talahanayan. At kailangan nating malaman ito. Paano ko mababago ang lapad ng talahanayan? Ang lapad ng talahanayan ay maaaring baguhin sa mga pixel o porsyento... Magsisimula na kaming baguhin ang lapad ng talahanayan sa html! Huling beses na gumawa kami ng talahanayan na 500 pixel ang lapad, na may tatlong column at tatlong row (tandaan ang tungkol sa border="1 attribute - na responsable para sa border) Narito ang code para sa talahanayang ito; Ngayon, upang maunawaan kung paano baguhin ang lapad ng isang talahanayan o column, palitan natin at magdagdag ng ilang numero sa ating code lapad ng talahanayan = "500" - baguhin sa 599. Ang pahinang ito ay binuo sa mga talahanayan, at ang lapad ng field ng teksto, i.e. kung saan matatagpuan ang mga salitang ito ay 600 pixels. Kukunin namin: Gawin natin ang lapad ng column No. 2 200 pixels: Gawin natin ang lapad ng column No. 3 299 pixels: At nakukuha namin ang code na ito: Tingnan natin ang table natin Ngayon, baguhin natin ang width attribute value sa kalahati = 50%. Napatingin kami sa table namin, which is 50%. Iyon lang ang gusto kong sabihin sa iyo tungkol sa kung paano baguhin ang mga lapad ng talahanayan. Ngayon ay lumipat tayo sa taas ng talahanayan! nagpapaalam sa browser na nakumpleto na ang talahanayan. Ang anumang talahanayan ay binubuo ng mga column at row. Tag
cell sa isang hilera. Alinsunod dito, dahil maraming mga cell ang kasama sa isang row, magkakaroon ng maraming mga column sa talahanayan. Tag	lumilikha din ng isang cell. Ang pagkakaiba nito sa isang tag	ay iyon ang cell na nilikha ng tag	ay isang header cell: ang mga nilalaman nito ay nakasentro, at kung ito ay teksto, ipinapakita ito ng browser sa bold. Mga nilalaman ng cell na ginawa ng tag	bilang default ito ay matatagpuan sa kaliwang bahagi nito. Tag

bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

Sa kasong ito, ang katangian numero ng cell set kulay puti text na matatagpuan sa loob ng tag.

Sa eksaktong parehong paraan ito ay tinukoy magkahiwalay ang kulay ng bawat cell. Halimbawa, kung gusto mong baguhin ang kulay ng cell 1.2 sa asul, pagkatapos ay sa loob ng pambungad na tag katangian bgcolor="background_color":

4. Paano itakda ang laki ng lapad at taas ng html table cells?

Kaya, upang manu-manong itakda ang lapad at taas ng mga cell, gamitin ang mga katangian ng taas at lapad. Maaari silang itakda para sa buong talahanayan, para sa isang hilera, o para sa isang cell (column). Ang taas at lapad ay maaaring tukuyin sa alinman sa mga pixel o porsyento. Sa aming kaso, itatakda namin ang lapad at taas sa mga pixel para sa mga column (mga cell).

taas- isang katangian na nagtatakda ng taas ng cell

lapad- katangian na tumutukoy sa lapad ng cell

At ngayon para sa isang halimbawa:

Ngayon ipapaliwanag ko kung bakit isang beses lang namin itinakda ang taas ng cell sa bawat hilera.

Kung sa isang hilera ay nagtatakda ka ng taas para sa anumang cell na mas malaki kaysa sa iba, kung gayon, sa kabila nito, ang lahat ng mga cell (column) ng iyong row ay magiging katumbas ng taas sa pinakamalaki. At ang lapad ng bawat hilera ay pinakamahusay na nakatakda nang hiwalay!

Maaari mong itakda ang taas at lapad para sa buong talahanayan. Sa kasong ito, hahatiin ng lahat ng mga cell (column) at row ang puwang na ibinigay sa kanila nang pantay, kung hindi mo itatakda ang mga parameter na ito sa kanila nang personal (bilang isang porsyento ng kabuuang lapad (taas) ng talahanayan o sa mga pixel).

Gayundin, madalas na kailangan mong itakda ang taas ng taas at lapad ng lapad sa mga porsyento:

nilalaman ng cell

Kung itatakda natin ang lapad ng isang cell sa 40 porsiyento, tulad ng sa ating halimbawa, nangangahulugan ito na mayroon pa tayong 60 porsiyento na natitira para sa natitirang mga cell, i.e. ang kabuuan ng kanilang mga lapad ay hindi dapat lumampas sa 60 porsiyento. Ang lahat ay napaka-simple: sa kabuuan mayroon lamang tayong 100%. Binibilang namin: 100 – 40 = 60.

5. Paano i-align ang teksto sa loob ng isang html table?

Ngayon, alamin natin kung paano ihanay ang teksto sa aming html table sa kaliwa, kanan at gitna.

Ginagawa ito gamit ang katangian:

align="left"- inihanay ang teksto sa loob ng html table sa kaliwa

align="center"- nakahanay html na teksto nakasentro ang mga talahanayan

align="right"- inaayos ang teksto sa loob ng isang html table sa kanan

Alinsunod dito, ang katangian ng align ay maaari ring kunin ang mga halaga sa kanan at kaliwa. Ang kahulugan ng justify kapag ginamit sa isang tag hindi matatanggap ang align attribute.

Halimbawa, html code ang isang talahanayan na may tekstong nakahanay sa gitna ay ganito ang hitsura:

align="center"> align="left"> 1x1 align="center">1.2 align="right"> 1x3 align="left">2.1 align="center"> 2x2 align="right">2.3

Sa pamamagitan ng pagrehistro ng katangian align="center" sa pagbubukas

, inihanay namin ang html table sa gitna ng pahina ng browser.

Ito ang resulta na makukuha mo sa browser:

1x1	1.2	1x3
2.1	2x2	2.3

Ngayon tingnan natin ang isang halimbawa kung paano i-align ang teksto sa loob ng isang html table sa tuktok o ibabang gilid, iyon ay, kung paano mo matitiyak na ang mga nilalaman ng isang cell ay hindi lamang matatagpuan nang eksakto sa gitna nito (bilang default ), ngunit din sa itaas o ibaba.

Ang vertical alignment ay tinukoy ng attribute:

valign="itaas"- ang nilalaman ay matatagpuan sa tuktok ng cell

valign="gitna"- ang nilalaman ay matatagpuan sa gitna ng cell

valign="ibaba"- ang nilalaman ay matatagpuan sa ibaba ng cell

Tingnan natin ang mga katangiang ito gamit ang ating halimbawa:

valign="itaas"> 1x1 1.2 valign="itaas"> 1x3 valign="ibaba">2.1 2x2 valign="ibaba">2.3

Ito ang makukuha natin kung titingnan natin ang resulta ng mga katangian sa browser ihanay At baliw:

1x1	1.2	1x3
2.1	2x2	2.3

6. Paano pagsamahin ang mga cell at column ng isang html table?

Sa bahaging ito ng aming artikulo ay pag-uusapan natin ang tungkol sa mga katangian colspan At rowspan.

colspan- tinutukoy ang bilang ng mga column na sakop ng isang naibigay na cell

rowspan- tinutukoy ang bilang ng mga hilera kung saan umaabot ang cell na ito

Mga halaga colspan At rowspan maaaring kumuha ng halaga mula sa 2 o higit pa, i.e. ang isang cell ay maaaring mag-abot sa dalawa o higit pang mga column (row).

Kaya, ngayon, gamit ang halimbawa, iuunat namin ang isang 1x1 cell sa dalawang column (mga cell). Upang gawin ito, gagamitin namin ang colspan="2" attribute, na itatalaga ito sa isang 1x1 cell. Magiging ganito ang code:

Gaya ng nakikita natin, ang 1x1 cell ay umaabot sa haba ng dalawang cell. Alinsunod dito, ang haba nito ay katumbas ng kabuuan ng haba ng dalawang cell na ito (160 pixels). Hindi kami tumukoy ng width attribute para sa 1x1 cell, ngunit kung nagpasya kaming gawin ito, itatakda namin ang lapad sa 160 pixels. At gayundin, mangyaring tandaan na sa aming halimbawa ay walang 1x3 cell, i.e. mayroon lamang dalawang mga cell sa unang hilera, bakit - napag-usapan na natin ito - ang isang 1x1 na cell ay katumbas ng dalawang mga cell, salamat sa katangian ng colspan.

Ang mga katangian ng colspan at rowspan ay dapat pangasiwaan nang maingat. Ang isang error ay maaaring maging sanhi ng pag-crash ng iyong site.

At ngayon na naiintindihan namin ang colspan parameter, tingnan natin ang parameter ng rowspan. Ang prinsipyo ng pagpapatakbo ay pareho:

colspan="2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Kaya, natutunan namin kung paano pagsamahin ang mga cell sa mga row at column ng mga html table.

7. Paano mag-alis, magdagdag o magpalit ng mga indent at paano magtakda ng frame para sa isang html table?

Kaya, mas maaga ay lumikha kami ng isang html table, ang mga indent sa pagitan ng mga cell ay malinaw na nakikita. Upang gawing mas nakikita ang mga ito, magdagdag tayo ng isang frame para sa aming talahanayan. Ginagawa ito gamit ang mga katangian:

border="lapad ng hangganan sa mga pixel"- nagtatakda ng lapad ng frame

bordercolor="kulay ng hangganan"- nagtatakda ng kulay ng frame

Halimbawa, bigyan natin ang ating html table ng itim na frame na 1 pixel ang lapad.

Para sa tag na ito

magdagdag ng mga katangian:

Ngayon ay malinaw na nating nakikita ang mga indent sa pagitan ng mga cell ng html table at ang mga indent mula sa mga panloob na gilid ng mga cell hanggang sa teksto. Samakatuwid, maaari naming pamahalaan ang mga indentasyon na ito nang walang anumang mga problema. Ang mga katangian ay para sa layuning ito:

cellspacing="space width in pixels"- espasyo sa pagitan ng mga cell

cellpadding="lapad ng padding sa mga pixel"- indentation sa loob ng cell (mula sa gilid ng cell hanggang sa text, imahe, link...)

Halimbawa, gawin nating 10 pixels ang indent sa pagitan ng mga cell, at pataasin ang indent mula sa gilid ng cell patungo sa text hanggang 20 pixels. Ginagawa ito tulad nito:

cellpadding="20"cellspacing="10"> 1.1 1.2 2.1 2.2

Kung titingnan natin ang resulta sa browser, malinaw nating nakikita na ang distansya sa pagitan ng mga cell ( cellspacecing) ng aming html table ay tumaas sa 10 pixels, at ang distansya sa pagitan ng text at panloob na gilid tumaas ng 20 pixels ang mga cell.

1.1		1.2
2.1	2.2

Kung kailangan mong alisin ang mga indent nang buo, ilagay lang cellpadding="0" At cellspacing="0".

8. Paano magpasok ng isang html table sa loob ng isa pa?

Papalapit na kami sa huling yugto ng pag-aaral ng mga talahanayan ng html. Ngayon ay matututunan natin kung paano magpasok ng isang mesa sa loob ng isa pa.

Gamit ang halimbawa, sa loob ng cell 1.2 ay maglalagay kami ng bagong talahanayan na binubuo ng isang hilera at dalawang hanay. Sa panloob na talahanayan ng html magtatakda kami ng pulang hangganan na may lapad na 2 pixel at distansya sa pagitan ng mga cell na 0 pixel. Ilalagay din namin ang panloob na talahanayan sa tuktok ng cell.

Ginagawa ito nang napakasimple:

1.1 3.1 3.2 2.1 2.2

Ito ang nangyari bilang resulta ng mga bagong pagbabago ng aming talahanayan (ang mga pulang selula ay isang panloob na talahanayan na matatagpuan sa loob ng isang malaking mesa):

1.1		3.1 3.2
2.1	2.2

Sa puntong ito tatapusin natin ang artikulong ito. Sa tingin ko ito ay naging matagumpay at hindi mahirap unawain, at umaasa ako na hindi ka na magkakaroon ng anumang mga problema sa mga talahanayan.

Ang detalye ng CSS ay nagbibigay ng walang limitasyong mga posibilidad para sa pagdidisenyo ng mga talahanayan. Bilang default, wala ang table at table cells nakikitang mga hangganan at background, habang ang mga cell sa loob ng talahanayan ay hindi magkatabi.

Ang lapad ng mga cell ng talahanayan ay tinutukoy ng lapad ng kanilang nilalaman, kaya ang lapad ng mga haligi ng talahanayan ay maaaring mag-iba. Ang taas ng lahat ng mga cell sa isang hilera ay pareho at tinutukoy ng taas ng pinakamataas na cell.

Pag-format ng mga talahanayan

1. Mga hangganan ng talahanayan

Bilang default, ang talahanayan at ang mga cell sa loob nito ay ipinapakita sa browser na walang nakikitang mga hangganan. Mga Hangganan ng Table ay tinukoy ng border property:

Talahanayan ( border-collapse: collapse; /*alisin ang mga bakanteng espasyo sa pagitan ng mga cell*/ border: 1px solid gray; /*set para sa table panlabas na hangganan kulay-abo 1px ang kapal*/ )

Mga hangganan ng cell ng header ang bawat column ay tinukoy para sa ika- elemento:

Th (border: 1px solid grey;)

Mga Hangganan ng Cell Ang mga katawan ng talahanayan ay tinukoy para sa elemento ng td:

Td (border: 1px solid gray;)

Ang kapal ng mga hangganan ng mga katabing cell ay hindi nadoble, kaya maaari kang magtakda ng mga hangganan para sa buong talahanayan sa sumusunod na paraan:

Th, td (border: 1px solid grey;)

Maaari mong i-highlight ang panlabas na hangganan ng isang talahanayan sa pamamagitan ng pagbibigay dito ng pinataas na lapad:

Talahanayan (border: 3px solid grey;)

Ang mga hangganan ay maaaring itakda nang bahagya:

/* magtakda ng grey na panlabas na border na 3px ang kapal para sa table */ table (border-top: 3px solid gray; ) /* magtakda ng gray na border na 1px ang kapal para sa table body cell */ td (border-bottom: 1px solid kulay-abo;)

Maaari kang magbasa nang higit pa tungkol sa pag-aari sa hangganan.

2. Paano itakda ang lapad at taas ng talahanayan

Default lapad at taas ng mesa tinutukoy ng mga nilalaman ng mga selula nito. Kung hindi tinukoy ang lapad, magiging katumbas ito ng lapad ng pinakamalawak na row (row).

Lapad ng talahanayan at haligi ay nakatakda gamit ang width property. Kung ang talahanayan (lapad: 100%;) ay tinukoy para sa isang talahanayan, ang lapad ng talahanayan ay magiging katumbas ng lapad ng bloke ng lalagyan kung saan ito matatagpuan.

Ang lapad ng talahanayan at mga column ay karaniwang tinutukoy sa px o %, halimbawa:

Talahanayan (lapad: 600px;) ika (lapad: 20%;) td:first-child (lapad: 30%;)

Taas ng mesa hindi tinukoy. Taas ng hilera Ang mga talahanayan ay maaaring manipulahin sa pamamagitan ng pagdaragdag sa itaas at ibabang padding sa mga elemento At . Ang pag-aayos ng taas gamit ang katangian ng taas ay hindi inirerekomenda.

Th, td (padding: 10px 15px;)

3. Paano itakda ang background ng talahanayan

Default background ng talahanayan at ang mga cell ay transparent. Kung may background ang page o block na naglalaman ng table, lalabas ito sa table. Kung ang background ay tinukoy para sa parehong talahanayan at mga cell, pagkatapos ay sa mga lugar kung saan ang background ng talahanayan at mga cell ay nagsasapawan, tanging ang background ng mga cell ang makikita. Ang background para sa talahanayan sa kabuuan at ang mga cell nito ay maaaring:
pagpuno,
,
.

4. Mga hanay ng talahanayan

Ang modelo ng talahanayan ng CSS ay pangunahing nakatuon sa mga row (row) na nabuo gamit ang tag

. Sa pagsasagawa, may mga kaso kung kinakailangan ang espesyal na pag-format ng mga haligi, na posible sa mga sumusunod na paraan:

gamit ang tag

Maaari mong itakda ang background para sa anumang bilang ng mga column;

gamit ang selector table td:first-child , table td:last-child maaari kang magtakda ng mga istilo para sa una o huling column ng table (maliban sa unang cell ng table header);

Gamit ang tagapili ng talahanayan td:nth-child (panuntunan sa pagpili ng column), maaari kang magtakda ng mga istilo para sa anumang mga column ng talahanayan.

Maaari kang magbasa nang higit pa tungkol sa mga tagapili ng CSS.

5. Paano magdagdag ng pamagat ng talahanayan

Maaari kang magdagdag ng pamagat sa isang talahanayan gamit ang isang tag , at gamit ang caption-side property maaari itong ilagay sa harap o sa ibaba ng talahanayan. Upang pahalang na ihanay ang teksto ng pamagat, gamitin ang property ng text-align. Minana.

...

Talahanayan Blg. 1

kumpanya	Q1	Q2	Q3	Q4

caption (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; ) kanin. 2. Halimbawa ng pagpapakita ng header sa ilalim ng table

6. Paano mag-alis ng espasyo sa pagitan ng mga cell frame

Bilang default, ang mga frame ng cell ng talahanayan ay pinaghihiwalay ng isang maliit na espasyo. Kung magtatakda ka ng border-collapse: collapse para sa talahanayan, aalisin ang gap. Ang ari-arian ay minana.

Syntax

Talahanayan (border-collapse: collapse;)
kanin. 3. Halimbawa ng mga talahanayan na may pinagsama at hiwalay na mga cell frame

7. Paano dagdagan ang espasyo sa pagitan ng mga cell frame

Gamit ang border-spacing property, maaari mong baguhin ang distansya sa pagitan ng mga cell frame. Nalalapat ang property na ito sa talahanayan sa kabuuan. Minana.

Syntax

Table (border-collapse: separate; border-spacing: 10px 20px;) table (border-collapse: separate; border-spacing: 10px;)
kanin. 4. Halimbawa ng mga talahanayan na may mas mataas na espasyo sa pagitan ng mga cell frame

8. Paano itago ang mga cell ng mesa na walang laman

Ang pag-aari ng mga walang laman na cell ay nagtatago o nagpapakita ng mga walang laman na cell. Nakakaapekto lamang sa mga cell na walang anumang nilalaman. Kung ang isang cell ay nakatakda sa isang background at ang isang talahanayan ay nakatakda sa talahanayan (border-collapse: collapse;) , kung gayon ang cell ay hindi itatago. Minana.

kumpanya	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table ( border: 1px solid #69c; border-collapse: separate; empty-cells: hide; ) th, td (border: 2px solid #69c;) kanin. 5. Halimbawa ng pagtatago ng isang walang laman na cell ng mesa

9. Layout ng table gamit ang table-layout property

Ang layout ng talahanayan ay tinutukoy ng isa sa dalawang diskarte: nakapirming layout o awtomatikong layout. Sa ilalim ng layout sa sa kasong ito ay tumutukoy sa kung paano ipinamamahagi ang lapad ng talahanayan sa mga lapad ng mga cell. Ang ari-arian ay hindi minana.

Syntax

Table (table-layout: fixed;)

10. Pinakamahusay na Mga Layout ng Table

1. Pahalang na minimalism

Ang mga pahalang na talahanayan ay mga talahanayan kung saan ang teksto ay binabasa nang pahalang. Ang bawat entity ay isang hiwalay na row. Maaari mong bigyan ang mga talahanayang tulad nito ng minimalist na hitsura sa pamamagitan ng paglalagay ng dalawang-pixel na hangganan sa ilalim ng th header.

Empleado	suweldo	Bonus	Superbisor
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left; ) th ( font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td ( color: #669; padding: 9px 8px; transition: .3s linear; ) tr:hover td (kulay: #6699ff;)

Kapag may malaking bilang ng mga row, ang disenyo ng talahanayan na ito ay nagpapahirap sa kanila na basahin. Upang malutas ang problemang ito, maaari kang magdagdag ng isang-pixel na hangganan sa ibaba ng lahat ng mga elemento ng td.

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*ang natitirang code ay tulad ng sa halimbawa sa itaas*/

Ang pagdaragdag ng :hover effect sa tr element ay gagawing mas madaling basahin ang mga talahanayang idinisenyo sa isang minimalist na istilo. Kapag ini-hover mo ang iyong mouse sa ibabaw ng isang cell, ang natitirang mga cell sa parehong hilera ay naka-highlight nang sabay-sabay, na ginagawang mas madaling subaybayan ang impormasyon kung ang mga talahanayan ay may maraming column.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)

2. Vertical minimalism

Bagama't bihirang gamitin ang mga naturang talahanayan, kapaki-pakinabang ang mga vertical na naka-orient na talahanayan para sa pagkakategorya o paghahambing ng mga paglalarawan ng mga bagay na kinakatawan ng isang column. Maaari mong idisenyo ang mga ito sa isang minimalist na istilo sa pamamagitan ng pagdaragdag ng espasyo upang paghiwalayin ang mga column.

Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- kanan: 30px solid #fff;

3. "Kahon" na istilo

Ang pinaka-maaasahang istilo para sa pagdidisenyo ng mga talahanayan ng lahat ng uri ay ang tinatawag na istilong "naka-kahon". Ito ay sapat na upang pumili ng isang mahusay scheme ng kulay, at pagkatapos ay itakda ang kulay ng background para sa lahat ng mga cell. Huwag kalimutang bigyang-diin ang pagkakaiba sa pagitan ng mga linya sa pamamagitan ng pagtatakda ng mga hangganan bilang isang separator.

Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( background : #e8edff; border-bottom: 1px solid #fff; 1px solid na transparent;

Ang pinakamahirap na bagay ay upang mahanap ang scheme ng kulay na magkakasuwato na tumutugma sa iyong website. Kung ang site ay mabigat sa mga graphics at disenyo, kung gayon magiging mahirap para sa iyo na gamitin ang istilong ito.

Talahanayan ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid #9baff1; 7px solid #9baff1; solid #9baff1; kulay: #039; padding: 8px; ) td (background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ; )

4. Pahalang na zebra

Ang zebra table ay mukhang medyo kaakit-akit at komportable. Karagdagang kulay Ang background ay maaaring magsilbi bilang isang visual cue para sa mga tao kapag nagbabasa ng talahanayan.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( background: #e8edff;)

5. Estilo ng pahayagan

Upang makamit ang tinatawag na epekto sa pahayagan, maaari mong ilapat ang mga hangganan sa mga elemento ng talahanayan at paglaruan ang mga cell sa loob. Maaaring ganito ang hitsura ng isang magaan at minimalistang istilo ng pahayagan: maglaro gamit ang scheme ng kulay, magdagdag ng mga hangganan, padding, iba't ibang background, at isang hover effect kapag nag-hover sa isang linya.

Talahanayan (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; ) td ( color: #669; padding: 7px 17px; ) tr:hover td (background: #ccddff;)

Talahanayan (border: 1px solid #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( color: #669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff; ) tr:hover td (background: #99bcff;)

Talahanayan (border: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2;

6. Background ng talahanayan

Kung naghahanap ka ng mabilis at natatanging paraan disenyo ng mesa, pumili ng kaakit-akit na larawan o larawang nauugnay sa tema ng talahanayan at itakda ito bilang background ng talahanayan.

Png") 98% 86% no-repeat; ) th ( font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; ) td ( color: #669; border- itaas: 1px solid white; background: rgba(51, 51, 153, .2);

Ang mga sukat ng talahanayan, ang taas at lapad nito, ay awtomatikong tinutukoy depende sa kung ano ang nilalaman ng mga cell sa loob ng mga ito. Ang mas maraming nilalaman sa mga cell, mas malaki ang sukat ng talahanayan at vice versa.

Gayunpaman, pinapayagan ka ng mga tampok ng CSS na baguhin ang laki ng isang talahanayan sa HTML sa pamamagitan ng eksaktong pagtukoy sa lapad at taas na kailangan mo. Upang maging patas, dapat tandaan na pinapayagan ka rin ng mga katangian ng talahanayan na magtakda mga kinakailangang sukat. Gayunpaman, sa ngayon ay pag-uusapan lamang natin ang tungkol sa CSS.

Dapat itong bigyang-diin na ang bawat talahanayan ay may sariling pinakamababang lapad at pinakamababang taas, na apektado ng nilalaman nito. At kahit na itakda mo ang mga halaga ng lapad at taas kahit na mas maliit, walang mangyayari. Ang mga gilid ng talahanayan ay hindi lalampas sa kanilang minimum.

Upang tukuyin ang lapad ng talahanayan kailangan mong gumamit ng CSS property lapad, at upang itakda ang taas na kailangan mong gamitin ang property taas.

Sa isang halimbawa ay ganito ang hitsura.

Talahanayan ( lapad: 500px; taas: 100px; )

Resulta sa browser:

Buong code:

Table na may ibinigay na laki

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Ang mga halaga ng lapad at taas ng talahanayan ay maaaring tukuyin bilang ganap na halaga(sa mga pixel) at kamag-anak - sa porsyento. Halimbawa, 20px at 20% ayon sa pagkakabanggit.

Kung gagamit ka ng mga porsyento upang magtakda ng mga dimensyon ng talahanayan, kakalkulahin ang mga ito batay sa mga sukat ng parent na elemento. Kung pag-uusapan natin ang ating halimbawa, kung gayon pinag-uusapan natin tungkol sa window ng browser.

May isa pang kahulugan - auto. At ito ay espesyal dahil sa tulong nito, ang lapad at taas ng talahanayan ay awtomatikong kinakalkula, bilang default. Sa pagsasagawa, ang pagtukoy sa halagang ito ay ganito ang hitsura.

Lapad: auto;

Taas: auto;

Nais naming ituon ang iyong pansin sa isa pang bagay: mahalagang punto. Mas mainam na huwag ipahiwatig ang taas bilang isang porsyento, dahil, bilang isang patakaran, sa kasong ito ay hindi sila gagana.

Tinutukoy ang mga laki ng indibidwal na mga cell at column

Kung sa tingin mo ay hindi wastong naitakda ng browser ang lapad ng mga column batay sa mga nilalaman ng mga cell, kung gayon may karapatan kang tukuyin ang mga laki ng mga cell at column sa iyong sarili. At ngayon ay pag-uusapan natin kung paano baguhin ang laki ng cell sa isang HTML table.

Ang pagbabago ng laki ng mga cell ay ginagawa gamit ang parehong mga katangian ng CSS bilang mga laki ng talahanayan, katulad ng: lapad At taas.

Upang magdagdag ng mga istilo sa mga cell, maaari mong gamitin ang isa sa dalawang opsyon:

1. Bigyan ang mga cell ng mga indibidwal na pangalan ng klase. Magiging ganito ang hitsura nito: class="cell-50px"

   At pagkatapos nito ay dapat kang maglapat ng mga istilo para sa mga klaseng ito.

2. Paganahin ang katangian istilo, sa loob kung saan isulat ang kinakailangang CSS code.

Sa pagsasagawa, ang pangalawang pagpipilian ay magiging ganito:

...

Gayunpaman, nais naming tandaan na hindi kinakailangang baguhin nang paisa-isa ang mga laki ng cell nang napakadalas. Bilang isang patakaran, ito ay ginagawa sa mga sitwasyon kung saan kinakailangan upang magtakda ng isang tiyak na lapad para sa mga haligi ng talahanayan. Sa kasong ito, mas madaling malutas ang problema. Kailangan mo lamang tukuyin ang lapad ng mga cell sa unang hilera.

Table na may ibinigay na laki

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Resulta sa browser:

Paano baguhin ang laki ng font sa isang talahanayan

Kadalasan mayroong pangangailangan na baguhin ang laki ng teksto sa isang talahanayan. Halimbawa, sa mga cell ng header. Magagawa ito gamit ang isang CSS property laki ng font. Itakda natin ang laki ng font para sa mga elemento :

Th (laki ng font: 30px; )

Ito ang nagtatapos sa araling ito. Iminumungkahi kong pag-isipan mong mabuti ang iyong takdang-aralin. Pag-aralan mo lang itong mabuti at pag-isipan ito. All the best sa lahat!

 

---

Basahin:
Bakit ka nangangarap ng isang bagyo sa mga alon ng dagat? Accounting para sa mga settlement na may badyet Mga cheesecake mula sa cottage cheese sa isang kawali - mga klasikong recipe para sa malambot na cheesecake Mga cheesecake mula sa 500 g ng cottage cheese Black pearl salad na may prun Black pearl salad na may prun Lecho na may mga recipe ng tomato paste