Кесте атрибуттарын үйрену арқылы HTML кестелерінің барлығын тиімді пайдалану
HTML кестесінің төлсипаттары сізге HTML кестелеріне көбірек бақылау береді. Кестелерге көп қызықты атрибуттар бар және оларды бетіңіздің көрінісін өзгертеді.
HTML TABLE элементінің төлсипаттары
HTML5 элементінде жаһандық атрибуттар және басқа бір атрибут қолданылады. Және ол тек 1 немесе бос мәніне ғана өзгерді (яғни шекара = «»). Егер сіз шекараның енін өзгерткіңіз келсе, шекара енін CSS сипатын қолданыңыз.
Жарамды HTML5 кесте атрибуттары туралы білу үшін төменде қараңыз.
HTML5 ішіндегі ескірген HTML 4.01 сипаттамасының бөлігі болып табылатын бірнеше атрибуттар бар:
- - кестедегі TD және TH элементтеріндегі CSS толтырғыш сипатын пайдаланыңыз.
- Кестеде CSS сипатының шекаралық кеңістігін пайдаланыңыз.
- CSS стильдерінің жиектік түсі: қара; және кестеде шекаралық стиль.
- CSS стильдерінің жиектік түсі: қара; және үстелдің тиісті элементтеріне шекаралық стилі.
- - Сонымен, CAPTION кестесіндегі құрылымды сипаттаңыз немесе бүкіл кестені фигураға қойып, оны FIGCAPTION ішінде сипаттаңыз. Я болмаса, кестенің құрылымын жеңілдету үшін түсініктеме қажет емес.
- CSS енінің сипатын пайдаланыңыз.
HTML 4.01-де қолданылған және HTML5-де ескірген бір атрибут.
HTML 4.01 TABLE атрибуттары туралы қосымша ақпарат алыңыз.
- туралау - орнына CSS маржасының сипатын пайдаланыңыз.
Сондай-ақ, HTML сипаттамасының бөлігі болып табылмайтын бірнеше атрибуттар бар.
Егер сіз қолдайтын браузерлер оларды басқара алатынын білсеңіз және сіз жарамды HTML туралы ойламасаңыз, бұл атрибуттарды пайдаланыңыз.
- Оның орнына CSS сипатының өң-түсін пайдаланыңыз.
- borderkolor - CSS сипатының шекаралық түсінің орнына пайдаланыңыз.
- borderkolorlight - CSS сипатының шекара түсінін пайдаланыңыз.
- borderkolordark - CSS сипатының шекарасын пайдаланыңыз.
- cols-Бұл атрибутқа балама жоқ.
- биіктігі-орнына CSS сипатын биіктігін пайдаланыңыз.
- Оның орнына CSS сипатының маржасын пайдаланыңыз.
- Оның орнына CSS сипатының маржасын пайдаланыңыз.
- Оның орнына CSS сипатын ақ-кеңістікке пайдаланыңыз.
- Оның орнына CSS сипатын тік-туралауды пайдаланыңыз.
Браузердің арнайы кесте төлсипаттары туралы көбірек біліңіз.
HTML5 TABLE элементі төлсипаттары
Жоғарыда айтылғандай, жаһандық атрибуттардан басқа, HTML5 TABLE элементінде жарамды бір ғана атрибуты бар: шекара.
Шекара атрибуты бүкіл кестенің айналасындағы шекараны және оның ішіндегі барлық ұяшықтарды анықтау үшін пайдаланылады. HTML5 спецификациясына қосылатыны туралы сұрақ туындады, бірақ ол стильдің құрылымы туралы ақпаратты жай ғана стильдің салдарынан тыс болғандықтан қалды.
Шекара атрибутын қосу үшін, шексіз болса және бос болса (немесе атрибутты қалдырсаңыз) мәнді 1-ге орнатыңыз. Көптеген браузерлер де шекараның шекарасына 0 және шекара енін пиксельдерде жариялауға арналған кез-келген бүтін сан мәнін (0, 2, 3, 30, 500, т.б.) қолдайды, бірақ бұл HTML5-те ескірген. Оның орнына, шекара енін және басқа мәнерлерді анықтау үшін CSS шекарасының мәнерінің сипаттарын қолданыңыз.
Шекпен кесте жасау үшін, жазыңыз:
border = «1» >
Бұл шекарасы бар кесте
HTML5 ішіндегі ескірген HTML 4.01 төлсипаттары бар. HTML 4.01 құжатын жазуды жоспарласаңыз, оларды білуге болады, әйтпесе, оларды елемеуге болады. Осы атрибуттардың көпшілігі жоғарыда сипатталған баламалар бар.
Біз HTML5 (және HTML 4.01) ішінде жарамды элементтердің атрибуттарын суреттейміз. Бұл HTML 4.01 ішінде жарамды, бірақ HTML5-де ескірген TABLE атрибуттарын сипаттайды. HTML 4.01 құжаттарын әлі де жазсаңыз, сіз бұл атрибуттарды пайдалана аласыз, бірақ олардың көпшілігінде HTML5-ке ауысқан кезде беттеріңіз болашақ болып көрінетін болады.
Жарамды HTML 4.01 төлсипаттары
Жоғарыда сипатталған атрибуция.
HTML5 ішіндегі HTML 4.01-дегі жалғыз айырмашылық пикселдердің шекарасының енін анықтау үшін бүтін бүтін сандарды (0, 1, 2, 15, 20, 200, т.б.) көрсетуге болады.
5px шекарасы бар кестені құру үшін, мынаны жазыңыз:
border = «5» >
Бұл кестеде 5px шекарасы бар.
Шекарасы бар екі кестенің мысалын қараңыз.
Ұяшық шекаралары мен ұяшықтың мазмұны арасындағы бос орын мөлшерін анықтайды. Әдепкі мәні - екі пиксел. Мазмұндар мен шекаралар арасында бос орын болмасаңыз, ұяшықтың пішінін 0 мәніне қойыңыз.
Ұяшық толтырғышын 20-ға қою үшін келесідей жазыңыз:
cellpadding = «20» >
Бұл кестеде 20-жолақты ұяшықтары бар.
Ұяшық шекаралары 20 пикселге бөлінеді.
Жасырын жасырын кестені мысалға келтіріңіз
Сипаттама кесте ұяшықтары мен ұяшық мазмұны арасындағы бос орын мөлшерін анықтайды. Ұяшықтарды толтыру сияқты, әдепкі екі пикселге орнатылады, сондықтан ұяшық аралығын қажет етпей, оны 0 мәніне орнатуыңыз керек.
Кестеге ұяшық аралығын қосу үшін, жазыңыз:
cellspacing = «20» >
Бұл кестеде 20 ұяшық ұяшығы бар.
Ұяшықтар 20 пикселге бөлінеді.
Ұяшықтарды орналастыру кестесін қараңыз
Төлсипат кестенің сыртқы жағына қатысты шекараның қандай бөліктері көрінетінін анықтайды. Сіз үстелді барлық төрт жағынан, кез-келген жағынан, үстіңгі және астыңғы жағынан, сол және оң жақтан немесе ешқайсысын жақтауыңызға болады.
Сол жақ шекарасы бар кесте үшін HTML:
frame = «lhs» >
Бұл кесте
болады
тек
сол жақ жиектелген.
Төменгі рамамен басқа мысал:
frame = «төмен» >
Бұл кестенің төменгі жағында рамка бар.
Кейбір кестелерді тексеріңіз
Атрибут кадрдың төлсипатына ұқсас, тек ол кестенің ұяшықтары шекарасына әсер етеді. Барлық ұяшықтарда, бағандар арасында, TBODY және TFOOT сияқты топтар арасында немесе ешбірде ережелер орнатуға болады.
Жолдар арасында тек сызықтармен кесте құру үшін, мына жерге жазыңыз:
ережелер = «жолдар» >
Бұл 4x4 кестеде бар
жолдарды бағандар емес
сөзімен сипатталған
ережелер атрибуты.
Және басқа бағандар арасындағы жолдар:
rules = «cols» >
Бұл
кесте
мұндағы
бағандар
- бұл
бөлектелген
Мұнда ереже бар кесте
Атрибут экран оқырмандары мен кестелерді оқуда қиындық туындауы мүмкін басқа пайдаланушылардың агенттері туралы ақпарат береді. Жиынтық төлсипатты пайдалану үшін кестенің қысқаша сипаттамасын жазыңыз және бұл төлсипаттың мәні ретінде белгілеңіз. Көпшілік стандартты веб-браузерлерде жиынтық веб-бетте көрсетілмейді.
Мұнда қарапайым кестені қысқаша баяндау әдісі берілген:
summary = «Бұл толтырғыш туралы ақпаратты қамтитын үлгі кесте, осы кестенің мақсаты қысқаша көрсету.» >
1-жол 1 жолында
баған 2 жол 1
баған 1 жол 2
2 баған 2
Жиынтық кестені қараңыз
Атрибут кестенің енін пикселдерде немесе контейнер элементінің пайыздық мәнінде анықтайды. Ені орнатылмаған болса, кесте мазмұнды көрсетуі керек болғандықтан, ең үлкен ені бар элементтің ені сияқты бірдей болуы керек.
Пиксельде нақты ені бар кесте құру үшін, мына жерге жазыңыз:
width = «300» >
Бұл кесте контейнер енінің 80% құрайды.
Үстіңгі элементтің пайыздық үлесі болатын ені бар кестені құру үшін, мына жерге жазыңыз:
width = «80%» >
Бұл кесте контейнер енінің 80% құрайды.
Ені бар кестені қараңыз
Тыйым салынған HTML 4.01 TABLE төлсипаты
HTML 4.01 ішінде ескірген және HTML5-те ескірген TABLE элементінің бір төлсипаты бар: туралау . Бұл атрибут үстелдің жанында орналасқан мәтінге қатысты бетте орналасуы керек екенін орнатуға мүмкіндік береді. Бұл төлсипат HTML 4.01 нұсқасында ескірген және оны пайдаланудан аулақ болу керек. Оның орнына CSS сипатын немесе маржа-сол: auto; және margin-right: auto; стильдер. Жылжымалы сипат сізге сәйкес келетін төлсипатқа неғұрлым жақын нәтиже береді, бірақ бет мазмұнын көрсетудің қалған жолына әсер етуі мүмкін. Маржин-оң: авто; және margin-left: auto; W3C компаниясы балама ретінде ұсыныс жасайды.
Түпнұсқалық атрибутты пайдаланып ескірген мысал:
align = «right» >
Бұл кесте дұрыс тураланған
Мәтін сол жаққа қарай ағып жатыр
Түзу төлсипатын пайдаланып ескірген мысалды қараңыз.
Сондай-ақ жарамды (ескірілмеген) HTML-пен бірдей әсерді алу үшін, жазыңыз:
style = «float: right;» >
Бұл кесте дұрыс тураланған
Мәтін сол жаққа қарай ағып жатыр
Келесіде HTML ерекшеліктерінің бір бөлігі болып табылмайтын TABLE атрибуттары түсіндіріледі.
Алдыңғы ақпарат HTML 4.01-де жарамды, бірақ HTML5-де ескірген HTML элементінің атрибуттарын сипаттайды.
Төменде кез-келген ағымдағы спецификацияда жарамсыз TABLE атрибуттары сипатталады. Егер сіздің беттеріңіз расталмағанын және сіздің пайдаланушыларыңыз бұл элементтерді қолдайтын шолғышты пайдаланатынына алаңдамайтын болса, онда сіз бұл элементтерді пайдалана аласыз. Бірақ олардың көпшілігі қазіргі заманғы браузерлерде қолдау көрсетпейді немесе баламалы стандарттарға сай келеді.
Бұл атрибуттарды HTML кестелерінде пайдалану ұсынылмайды .
Атрибут - CSS-ке кеңінен қолдау көрсетілмеген ескі атрибут. Бұл кестенің өң түсін өзгертуге мүмкіндік береді. Түс атауын немесе он алтылық кодты орнатуға болады. Бұл атрибут әлі күнге дейін көптеген браузерлерде жұмыс істейді, бірақ келешекке дәлелденген HTML үшін сіз оны пайдаланбауыңыз керек және орнына CSS-ні қолданыңыз.
Бұл төлсипаттың жақсы баламасы стиль сипаты.
Кестенің өң түсін өзгерту үшін, мына жерге жазыңыз:
style = «background-color: #ccc;» >
Бұл кестеде сұр фон бар
Bgcolor төлсипатына ұқсас, borderkolor төлсипаты атрибуттың түсін өзгертуге мүмкіндік береді. Бұл атрибут тек Internet Explorer арқылы қолдайды. Оның орнына, шекаралық түс мәнерінің сипатын пайдалануыңыз қажет.
Кестеңіздің шекарасының түсін өзгерту үшін мынаны жазыңыз:
style = «border-color: red;» >
Бұл кестеде қызыл шек бар.
Bordergolorlight және bordercolordark атрибуттары сіздің үстеліңізде 3D шекарасын жасауға мүмкіндік беретін Internet Explorer-ге қосылды. Алайда, IE8 және одан кейінгі жағдайға байланысты, бұл IE7 стандарттарының режимінде және Quirks режимінде ғана қолдаулы. Microsoft бұл сипаттар бұдан былай қолдау көрсетілмейтінін мәлімдейді.
Таяу арада TABLE элементіндегі cols төлсипаты браузерлерге кестенің қанша бағаны білетініне көмектесу үшін ұсынылды. Бұл үлкен кестелерді көрсетуді жылдамдатуға көмектеседі. Дегенмен, бұл тек Internet Explorer және IE8 және одан жоғары деңгейде жүзеге асырылды, бұл IE7 стандарттарының режимінде және Quirks режимінде ғана қолдаулы.
Ені атрибуты болғандықтан (HTML5-те ескірген) көптеген адамдар кестелер үшін биіктік атрибуты бар деп есептеген. Бірақ кестелер CSS немесе ендік атрибуттарында олардың мазмұнының еніне немесе анықталған еніне сәйкес келетіндіктен, биіктікті шектеуге болмайды. Сондықтан браузерлер биіктік атрибутына кестенің ең төменгі биіктігін анықтауға мүмкіндік берді. Егер кесте биіктіктен жоғары болса, онда ол жоғары деңгейде көрсетіледі. Бірақ мүлікті пайдалану керек
Егер сіз CSS сипатын пайдалансаңыз, егер CSS артықшылығына ие болсаңыз, биіктікті шектей аласыз.
Кестеге ең төменгі биіктікті орнату үшін, мына жерге жазыңыз:
style = «height: 30em;» >
Бұл кесте ең аз дегенде 30 ems.
Кестенің сол жақ / оң жағында (hspace) және жоғарғы / төменгі (vspace) айналасындағы екі атрибуттар мен қосылатын кеңістік. Оның орнына стиль сипатын қолданыңыз.
Тік кеңістікті 20 пикселге және көлденең кеңістікті 40 пикселге орнату үшін, мынаны жазыңыз:
style = «margin: 20px 40px;»
Бұл кестеде 20 пикселден тұратын vspace және 40 пиксель жылдамдығы бар.
Атрибут - бұл кестенің мазмұны басты элементтің немесе терезенің шетіне оралғанын немесе көлденең жылжуды анықтайтынын анықтайтын логикалық атрибут. Оның орнына, CSS сипатын пайдаланып әрбір кесте ұяшығының орауыш сипаттамаларын анықтауыңыз керек.
Мәтінді орамалмаған бағанды жасау үшін төмендегілерді жазыңыз:
style = «white-space: nowrap;» > Бұл мазмұнның тоннасы бар баған. Бірақ контейнерден кеңірек болса да, мәтін келесі жолға оралмауы керек, бірақ орнына барлық мазмұнды көру үшін браузер терезесін көлденең айналдыруға мәжбүрлейді.
Соңында, атрибуция әрбір ұяшықтың мазмұны ұяшық ішінде тігінен туралану керек екенін анықтайды. Осы жарамсыз төлсипаттың орнына, сіз әр өрісте CSS сипатын пайдаланып, туралауды өзгерту керек. Ұяшық мазмұны басқа, үлкенірек ұяшықтар жасаған бос орыннан аз болмаса, осы стилдің әсерлерін байқамайсыз.
Ұяшықты түбіне (ортадан гөрі, әдепкі ретінде емес) теңестіру үшін, мынаны жазыңыз:
Бұл ұяшық қалғандарға қарағанда ұзағырақ және биіктігі жоғары болуын мәжбүр етеді. Сондықтан тігінен тураланған ұяшықтың түбіне тураланғанын көресіз.
style = «vertical-align: bottom;» > Төмендегі мазмұн.
Ортасындағы мазмұн.