Menu ng Estilo ng TAS – Mga HTML Table

Ang sumusunod ay isang pangunahing HTML na talahanayan na maaaring magamit para sa paglalahad ng impormasyon. Ito dapat ang "unang pagpipilian" kapag ang impormasyon sa tabular ay dapat ihatid sa website ng TAS.

Ang mga sumusunod ay mga pamamaraan kung saan dapat baguhin ang HTML ng talahanayan upang malikha ang istilong ipinakita sa itaas:

• Isama ang a <caption> elemento sa <tbody> seksyon, bago ang anuman <tr>. Kabilang dito ang naka-bold na "heading" para sa buong talahanayan. Kasama ito sa loob ng <table> tinitiyak ng elemento na inilalarawan nito ang buong talahanayan sa mga screenreader.
• Magdagdag ng katangian ng style="width:100%" sa <table> elemento, upang pilitin itong sumaklaw sa lapad ng lalagyan ng page. Opsyonal ito, kung ninanais na magkaroon ng mas makitid na mesa.
• Magdagdag ng klase ng “blog” sa <table> elemento - itinatakda nito ang mga hangganan ng talahanayan na gumuho, at kulayan ang mga ito ayon sa TAS web palette. Tinitiyak din nito na ang iba pang mga klase ay naaangkop na kinuha sa CSS.
• Magdagdag ng klase ng "header" sa bawat isa <th> elemento sa itaas na hilera. Tinitiyak nito na nakakakuha sila ng kulay ng background mula sa TAS web palette.
• Para sa anumang kaliwang column header cell, tiyaking ito ay a <th> elemento, ngunit magdagdag ng klase ng "kaliwa" sa halip na "header" dito. Tinitiyak nito na HINDI nito nakukuha ang background shading, at ang teksto ay nakahanay sa kaliwa ng cell.
• Maliban kung ang iyong talahanayan ay mayroon lamang isang row O column ng mga header; tiyakin na ang bawat header cell ay may a scope katangian. Halimbawa; kung parehong mga header ang unang row at unang column, kailangan mo ng mga attribute ng saklaw, tulad ng sa talahanayan sa itaas.
• Magdagdag ng katangian ng style="width: __%;" sa bawat <th> sa unang hilera, kung saan ang highlight ay isang numero. Ang porsyento ay dapat na angkop upang ibaluktot ang laki ng haligi ng talahanayan. Nagbibigay ito ng kontrol sa mga column sa disenyo. Inaalis ang anumang lapad sa <th> hahayaan sila ng mga elemento na mag-flex batay sa pinakamalawak na nilalaman na walang espasyo. Ibalot ang nilalaman sa loob ng mga cell (<th> or <td>) sa anumang espasyong karakter, nang walang nakatakdang lapad.

Ang bawat isa sa mga ito ay opsyonal ngunit ang pamantayan para sa mga pangunahing talahanayan sa website ng TAS.

Ang mga sumusunod ay ilang mga tip upang gabayan ang proseso ng pag-akda/pag-edit, upang makatulong na iayon ang tabular na data sa mga simpleng HTML na format ng talahanayan.

• Iwasan ang pinagsamang mga cell ng talahanayan – Bagama't karaniwan na ang pagsasama-sama ng mga cell sa Excel, ang mga pinagsamang cell sa mga HTML na talahanayan ay likas na mahirap buuin, at kahit na maayos na naka-code; Ang software sa pagbabasa ng screen ay hindi pare-parehong nag-parse ng impormasyon.
  • Kung maaari, ayusin muli ang impormasyon. Minsan mas madaling hatiin ang isang talahanayan sa dalawang magkaibang mga talahanayan, kaysa muling i-code ang isang solong talahanayan upang iangkop para sa mga screen reader. Halimbawa; kung may ibinigay na talahanayan na nagpapakita ng data mula sa dalawang magkaibang taon – isama ang dalawang magkaibang talahanayan, at caption ang bawat isa ayon sa taon.
• Gamitin <caption> elemento para sa pagbibigay ng pangalan sa talahanayan sa kabuuan, hindi isang <h#> elementong nakaupo sa labas ng <table> elemento.
• Gumamit ng mas mababang antas <h#> mga elemento sa talahanayan kung kailangan mong gumamit ng mga heading (aka; huwag sirain ang hierarchy ng h-element ng pahina sa loob ng talahanayan).
• paggamit scope, colspan, at rowspan mga katangian nang naaangkop
  • scope ay ginagamit, kapag mayroong parehong patayo at pahalang na mga cell ng header ng talahanayan, upang matukoy ang konteksto ng cell ng header (hal; kung ang cell ng header ay para sa row o column)
  • colspan ay ginagamit kapag pinagsama ang mga cell sa maraming column – upang matukoy kung gaano karaming column ang pinagsama-sama
  • rowspan ay ginagamit kapag pinagsama-sama ang mga cell sa maraming row – upang matukoy kung gaano karaming row ang pinagsama-sama
• Iwasan ang mga layout table – Ang "Layout table" ay kapag ang mga elemento ng HTML ng talahanayan ay ginagamit upang iposisyon ang HTML na nilalaman, ngunit ang lahat ng mga tampok ng talahanayan ay naka-setup upang hindi maipakita (hal; walang mga hangganan, walang mga heading, atbp...). Ito ay isang halimbawa ng paggamit ng umiiral na kaalaman upang makamit ang ninanais na epekto – nang walang kaalaman sa mga kaugnay na epekto. Sa huli; ang mga talahanayan ng layout ay mahigpit na pinanghinaan ng loob mula noong HTML 4.0 (1999); at ang pagpoposisyon at pagtatanghal ay dapat kontrolin sa pamamagitan ng CSS. Kapag may pagdududa: makipag-ugnayan sa isang tao mula sa TAS M&T para tumulong sa CSS layout.