Тәжірибелік жұмыс №12
Тақырыбы: Colspan және rowspan параметрлері
Әдістемелік нұсқау:
Бұл бөлімде colspan және rowspan параметрлері туралы айтамыз. Colspan - бағандардың санын анықтайды, ал rowspan - қатар санын анықтайды (бұл параметрлер 2-ден жоғары мәндерді қабылдайды, яғни бағандар екі немесе одан да көп болуы мүмкін). Енді түсінікті болуы үшін мысалға назар аударайық.
Бұл мысалда 1х1 ұяшығына жазу арқылы colspan=2 параметрін қолдандық. Код келесі түрде болады:
colspan="2"> 1x1 |
1x2 |
2x1 |
2x2 |
2x3 |
Назар аударыңыз, біздің мысалда 1х1 ұяшығы үшін width параметрі көрсетілмеген, егер бұл параметрді енгізгіңіз келіп тұрса, біздің мысалда 1х1 ұяшығы үшін оны 100 пикселмен жазу керек, бірақ сонда да 1х1ұяшығы қалғанынан екі есе ұзын.
Тағы да назар салыңыз, Біздің мысалда 1х3 ұяшығы жоқ,яғни бірінші қатарда бар болғаны екі ұяшық, 1х1ұяшығы ені бойынша қалған екі ұяшықпен тең. Егер біз 1х3 ұяшығын жазатын болсақ, онда мынадай пайда болады:
Енді colspan және rowspan туралы айтайық. Қызмет еті принципі алдыдағыдай:
Мынадай кестеға өзіңіз код жазып көріңіз (мұнда 2х3 ұяшығы жоғалып кетуі керек). Тағы да мынадай кестеға код жазып көріңіз
Егер түсінген болсаңыз келесі баспалдаққа өтейік.
Сонымен, біз мына кестеға келіп тоқтаған болатынбыз:
Ойланып көрейік кестеға тағы қандай өзгерістер енгізуге болады, мысалы кестеның ұяшықтарының арасындағы бос кеңістіктен арылуға болады:
cellspacing, атрибутының көмегімен мынадай әдемілікке жылжып барады, нөлге тең:
cellspacing=0>
1x1 |
1x2 |
2x1 |
2x2 |
Ұяшықтар арасындағы ұяшықтарды керісінше кеңейтуге болады, cellspacing=5 болсын делік, сонда нәтиже болады:
Әдетте, cellspacing атрибуты қолжазбалар мен оқулықтарда cellpadding атрибутымен бірге қолданылады, яғни ұяшықтардағы берілгендер мен оның шекарасы арасында боскеңістік ұстап тұрады. Барлығы анық болуы үшін мен мәтінді ұяшықтың бірінші қатарының жоғарғы жағына valign атрибутын қолдану арқылы орналастырамын:
Енді cellpadding=5 атрибутын береміз:
Ұяшықтың берілгендері мен шекарасының арасындағы бос кеңістік дегеніміз не екені енді бәріне түсінікті болған шығар, және cellpadding тегінің қолданысы. Салыстырып көріңіз.
Кодты өзі қоя алмайтындарға - міне (кестеның соңғы варианты үшін):
cellpadding=5>
valign="top"> 1x1 |
valign="top"> 1x2 |
valign="bottom"> 2x1 |
valign="bottom"> 2x2 |
Енді келесі баспалдаққа өтейік, ішкі кесте туралы.
Достарыңызбен бөлісу: |