ßê çàäàòè øèðèíó òàáëèö³
²íñòðóêö³¿ ìîâè HTML (HyperText Markup Language àáî «Ìîâà ðîçì³òêè ã³ïåðòåêñòó»), ÿê³ ôîðìóþòü òàáëèö³, ðîçì³ùóþòüñÿ â âåá-ñòîð³íêàõ, ïåðåäáà÷àþòü äîñèòü âåëèêó ê³ëüê³ñòü äîäàòêîâèõ ïàðàìåòð³â. Öå äîçâîëÿº, íà â³äì³íó â³ä ³íøèõ áëî÷íèõ åëåìåíò³â, çàäàâàòè ðîçì³ðè íå ò³ëüêè çà äîïîìîãîþ ìîâè CSS (Cascading Style Sheets àáî «Êàñêàäí³ òàáëèö³ ñòèë³â »), àëå ³ çàñîáàìè ñàìîãî HTML.
1
Âèêîðèñòîâóéòå àòðèáóò width òåãà table äëÿ âêàç³âêè øèðèíè òàáëèö³ â ï³êñåëàõ. Òåã (³íñòðóêö³ÿ ìîâè HTML) table ñêëàäàºòüñÿ ç â³äêðèâຠ() ² çàêðèâຠ(
) ×àñòèí, ì³æ ÿêèìè çíàõîäÿòüñÿ òåãè, ùî ôîðìóþòü ðÿäêè òà êë³òèíêè òàáëèö³. Ó â³äêðèâຠòåã ìîæíà ïîì³ñòèòè äîäàòêîâ³ ïàðàìåòðè (àòðèáóòè), ñïèñîê ÿêèõ äëÿ êîæíîãî êîíêðåòíîãî òåãà âèçíà÷àºòüñÿ ì³æíàðîäíèìè ñòàíäàðòàìè. Äëÿ òåãà table öèìè ñòàíäàðòàìè äîçâîëåíî âèêîðèñòàííÿ àòðèáóòà width, ÿêèé çàäຠøèðèíó òàáëèö³ â ï³êñåëàõ. Âèãëÿäàòè HTML-êîä íàéïðîñò³øî¿ òàáëèö³ ç òàêèì òåãîì, âèçíà÷àëüíèì øèðèíó â 500 ï³êñåë³â, ìîæå, íàïðèêëàä, òàê:
1à îñåðåäîê | 2à îñåðåäîê |
2
Äîäàâàéòå ñèìâîë% äî çíà÷åííÿ àòðèáóòà width, ÿêùî øèðèíó òàáëèö³ òðåáà âêàçàòè ó â³äñîòêàõ, à íå â ï³êñåëàõ:
Çâåðí³òü óâàãó íà òå, ùî ö³ â³äñîòêè íå îáîâ`ÿçêîâî áóäóòü â³äðàõîâóâàòèñÿ â³ä øèðèíè â³êíà áðàóçåðà. Òóò ìຠçíà÷åííÿ ñòðóêòóðà äîêóìåíòà - ÿê âêëàäåíà ìàòðüîøêà íå ìîæå áóòè øèðøå ò³º¿, â ÿêó âîíà âêëàäåíà, òàê ³ 100% øèðèíè òàáëèö³ íå ìîæå áóòè á³ëüøå øèðèíè áàòüê³âñüêîãî åëåìåíòó. Íàïðèêëàä, ÿêùî òàáëèöÿ çíàõîäèòüñÿ âñåðåäèí³ áëîêó div, òî çà 100% áóäå ïðèéìàòèñÿ øèðèíà öüîãî áëîêó.
1à îñåðåäîê | 2à îñåðåäîê |
3
Âèêîðèñòîâóéòå ³íñòðóêö³¿ ìîâè îïèñó ñòèë³â, ÿêùî õî÷åòå â îäíîìó ì³ñö³ âèõ³äíîãî êîäó çàäàòè îäíàêîâó øèðèíó òàáëèöÿìè, ðîçì³ùåíèìè â âåá-ñòîð³íö³. Äëÿ öüîãî ñïî÷àòêó ïîì³ñò³òü â çàãîëîâíó ÷àñòèíó HTML-êîäó (ì³æ ³ ) ³äêðèâຠ³ çàêðèâຠòåãè, ùî îáìåæóþòü ³íñòðóêö³¿ ìîâè CSS: Ïîò³ì ì³æ öèìè òåãàìè ïîì³ñò³òü òàêèé CSS-êîä: table {width: 100px;} Òóò table âêàçóº íà òå, ùî ïîì³ùåíå âñåðåäèíó ô³ãóðíèõ äóæîê îïèñ ìຠáóòè çàñòîñîâàíå äî âñ³õ òåãàì table, ÿêå òðàïëÿºòüñÿ â êîä³ ñòîð³íêè. Íó à ïàðàìåòð width çàäຠøèðèíó. Òóò òåæ ìîæíà âèêîðèñòîâóâàòè â³äíîñíó øèðèíó â ïðîöåíòàõ.
4
Âêàçóéòå â CSS-êîä³ ³ â HTML-òåãó table ³ì`ÿ êëàñó, ÿêùî çàäàòè øèðèíó òðåáà íå äëÿ âñ³õ òàáëèöü, à ò³ëüêè äëÿ îäí³º¿ àáî äåê³ëüêîõ. Íàïðèêëàä, íåõàé êëàñ, ùî â³äçíà÷ຠãðóïó âóçüêèõ òàáëèöü, íàçèâàºòüñÿ tiny. Òîä³ îïèñ éîãî ñòèëþ ìîæå âèãëÿäàòè òàê: table.tiny {width: 100px;} À â³äïîâ³äíèé òåã îäí³º¿ ç òàáëèöü â HTML-êîä³ - òàê:
1à îñåðåäîê | 2à îñåðåäîê |
Ñòàòò³ çà òåìîþ "ßê çàäàòè øèðèíó òàáëèö³"
Îö³í³òü, áóäü ëàñêà ñòàòòþ