Тек бес минуттан кейін CSS кестесінің шекарасын қалай жасау керектігін біліңіз
CSS және HTML кестелерінің араласпағанын естіген шығарсыз. Бұл жай емес. Иә, HTML- кестелерді орналастыру үшін CSS-тің орналасу стилдерімен алмастырылған веб-дизайнның жақсы тәжірибесі енді емес, бірақ кестелер веб-параққа кестелік деректерді қосу үшін қолданылатын дұрыс түзетулер болып табылады.
Өкінішке орай, көптеген веб-мамандар олардан зиянды деп санайтын кестелерден алыстап кеткендіктен, көптеген кәсіби мамандар бұл HTML элементімен және оларды веб-бетте өңдеуге тура келетін күреспен аз тәжірибе алмайды. Мысалы, егер сізде кесте бар болса және кесте ұяшықтарына ішкі сызықтарды қосқыңыз келсе.
CSS үстел жиектері
Кестелерге шекараларды қосу үшін CSS-ні пайдаланған кезде, ол тек кестенің сыртындағы шекараны ғана қосады. Егер сол кестенің жеке ұяшықтарына ішкі сызықтарды қосқыңыз келсе, ішкі CSS элементтеріне шекаралар қосыңыз. Сондай-ақ, HR тегтерін жеке ұяшықтар ішіндегі жолдарды қосу үшін пайдалануға болады.
Осы мақалада қамтылған мәнерлерді қолдану үшін веб-беттегі кесте болуы керек. Содан кейін стиль кестесін құжатыңыздың басында ішкі стилі парағы ретінде жасауыңыз керек (егер сіз «торап» бір ғана бет болса, оны жасайсыз) немесе құжатты сыртқы мәнер парағы ретінде бекітіңіз (бұл сіз егер сіздің сайтыңыз бірнеше беттер болса, барлық беттерді бір сыртқы парақтан мәнерлеуге мүмкіндік береді). Стильдерді осы стиль кестесіне ішкі сызықтарды қосу үшін орналастырасыз.
Бастамас бұрын
Алдымен жолдарыңыздың кестеде пайда болуын қалағаныңыз жөн. Сізде бірнеше нұсқа бар:
- Торды қалыптастыру үшін барлық ұяшықтарды қоршау;
- Жолдарды тек бағандар арасында орналастыру;
- Жолдар арасында ғана; немесе
- Арнайы бағандар немесе жолдар арасында.
Сондай-ақ, жеке ұяшықтардың немесе жекелеген ұяшықтардың айналасындағы сызықтарды орналастыруға болады.
Кестедегі барлық ұяшықтардың айналасындағы сызықтарды қалай қосу керек
Кестедегі барлық ұяшықтардың айналасындағы сызықтарды қосу үшін, осы торға ұқсас әсерді жасау үшін, стилі парағына төмендегіні қосыңыз:
td, мың {
шекара: қатты 1px қара;
}
Кестеде жай бағандар арасында сызықтарды қалай қосуға болады
Бағалар арасындағы жолдарды қосу үшін (бұл кестенің бағандарынан жоғарыдан төменге дейін жұмыс істейтін тік сызықтарды жасайды), мәнер кестеңізге мыналарды қосыңыз:
td, мың {
border-left: қатты 1px қара;
}
Содан кейін, егер олардың бірінші бағанда пайда болуын қаламасаңыз, сол және td ұяшықтарына сынып қосуыңыз керек. Бұл мысалда бізде осы ұяшықтарда шекара емес сынып бар және біз осы нақты CSS ережесімен шекараны алып тастаймыз деп есептейміз. Мынау HTML-сыныпты қолданамыз:
class = «no-border»> деп жазылған
Содан кейін стиль кестесіне келесі стиль қосуға болады:
шексіз {
шекара-сол: жоқ;
}
Кестеде тек жолдар арасында сызықтарды қалай қосуға болады
Бағандар арасындағы жолдарды қосқанда, сіз мұны стилі парағына қосылған қарапайым стильмен жасауға болады. Төменде келтірілген CSS біздің үстелдің әр жолының арасында тік сызықтарды қосады:
tr {
төменгі шекара: қатты 1px қара;
}
Кестенің төменгі жағынан шекараны алып тастау үшін, сіз тағы да осы тр тегіне сынып қосасыз:
class = «no-border»> деп жазылған
Мәнер парағына келесі стильді қосыңыз:
шексіз {
шекараның төменгі жағы: жоқ;
}
Кестеде арнайы бағандар немесе жолдар арасында сызықтарды қалай қосуға болады
Арнайы жолдар немесе бағандар арасындағы жолдарды ғана қаласаңыз, сол ұяшықтарда немесе жолдарда сыныпты пайдалануыңыз керек. Бағандар арасында сызық қосу жолдар арасындағысынан әлдеқайда қиын, себебі сіз сол бағандағы әрбір ұяшыққа класс қосуыңыз керек. Егер сіздің кестеңіз автоматты түрде CMS-нің бір түрінен жасалса, мүмкін бұл мүмкін емес, бірақ сіз қолмен кодты қолмен жасасаңыз, осы нәтижеге қол жеткізу үшін қажетті сыныптарды қоса аласыз.
class = «side-border»> дегенді басыңыз
Жолдар арасындағы жолдарды қосу әлдеқайда оңай, себебі сіз жолды тек жолды қосқыңыз келген жолға қосасыз.
class = «border-bottom»> параметрін таңдаңыз
Содан кейін стиль кестесіне CSS қосыңыз:
.border-side {
border-left: қатты 1px қара;
}
.border-bottom {
төменгі шекара: қатты 1px қара;
}
Кестеде жеке ұяшықтардың айналасындағы сызықтарды қалай қосу керек
Жеке ұяшықтардың айналасындағы сызықтарды қосу үшін сіз шекарадағы шекара қажет ұяшықтарға сынып қосасыз:
class = «border»> дегенді басыңыз
Содан кейін стиль кестесіне келесі CSS қосыңыз:
.border {
шекара: қатты 1px қара;
}
Кестеде жеке ұяшықтар ішінде сызықтарды қалай қосу керек
Егер ұяшықтың ішіндегі жолдарды қосқыңыз келсе, мұны істеудің ең оңай жолы көлденең ереже тегі (
) болады.
Пайдалы кеңестер
Егер шекараларыңыздағы бос орындарды байқасаңыз, кестедегі шекаралық тастау стилінің орнатылғанына көз жеткізіңіз. Стиль кестесіне мыналарды қосыңыз:
кесте {
шекарадан айрылуы: құлау;
}
Жоғарыдағы барлық CSS-ті болдырмауға және кесте тегіңізде шекара төлсипатын пайдалануға болады. Алайда, оның атрибуты ескірмеген болса, CSS-ге қарағанда едәуір икемді болып табылады, өйткені шекараның енін ғана анықтай алады және оны тек кестенің барлық ұяшықтарында немесе ешбірінде ғана жасай алады.