эле, беш мүнөттүн ичинде бир CSS стол чек кантип түзүү тууралуу билүү
Сиз CSS жана HTML үстөл мүмкүн эмес деп уктум мүмкүн. Бул жөн гана туура эмес. Ооба, колдонуп HTML жайгаштыруу үчүн столдорду мындан ары дизайн мыкты тажрыйба, CSS жайгашуусу стилдер менен алмаштыруу болгон, бирок столдор дагы баракка түрүндөгү маалыматтарды кошуу үчүн пайдаланууга туура белгилөө болуп саналат.
Тилекке каршы, алар уулуу деп ойлоп алыс көптөгөн интернет адистер качышчу үстөлдөргө, анткени ошол адистер көп, алар интернет барагында, аларды чечүүгө болгондо ушул жалпы HTML элемент жана күрөш менен иштөө аз тажрыйбасы бар. Мисалы, эгер бир-беттеги үстөл бар болсо, үстөл клеткаларга ички саптары кошкубуз келет.
CSS стол Borders
Сиз колдонуу CSS столдор үчүн чек кошуу үчүн, ал үстөлгө сыртына тегерете чек кошумчалайт. ошол столдо айрым клеткаларына ички саптары кошуп алгысы келсе, анда ички CSS элементтерге чек кошуу керек. Ошондой эле ар бир клетканын ичиндеги саптарды кошуу HR теги колдоно аласыз.
Бул макалада камтылган стилин колдонуу үчүн, албетте, бир болушу керек дасторкон сиздин интернет баракчасында. Сиз андан кийин катары стилдер жадыбалы түзүү зарыл ички стилдин сиздин документтин башына (сиздин "сайт" бир барак болсо, анда, сыягы, бул эмне кылат) же ошондой эле документ тиркелет тышкы стилдердин баракта (Силер мындай сиздин сайт бир нече барактар болсо, анда эмне болот - сиз бардык барактарын тышкы шейшеп) стилдештирүүнү жол. Сиз бул стилдин салып ички саптар менен толукталсын образын коёт.
Сен баштаганга чейин
Алгач сиз саптары сиздин дасторконго пайда каалаган жерде чечиши керек. анын ичинде, бир нече ыкмалар бар:
- тор түрүндөгү бардык клеткаларын курчаган;
- эле түркүктүн ортосуна сызыктарды жайгаштырабыз;
- катар ортосунда эле; же
- белгилүү бир мамыча же сапты ортосунда.
Ошондой эле жеке клеткаларга айланып же айрым клеткалардын ичинде саптарды коюш мүмкүн.
Бир столдун бардык клеткалардын Around даяр кошуу керек
Ошол тор сыяктуу таасир жаратып, Дасторкон бүт клеткаларга айланып саптарды кошуу үчүн, стилдин төмөнкүдөй толукталсын:
ТД, чи {
Чек ара: катуу 1px кара;
}
жадыбалда эле түркүктүн ортосуна даяр кошуу керек
түркүктүн ортосуна саптарды кошуу үчүн (ушул столдун колонналарга башынан аягына чейин чуркап тик сызыктар жараткан), силерге стилдин төмөнкүдөй толукталсын:
ТД, чи {
чек-ара-сол: катуу 1px кара;
}
Андан кийин, сиз аларды биринчи катарда каалаган жок болсо, анда сиз ошол к TD клеткаларга тобуна кошуу керек болот. Бул мисалда, биз бул клеткаларга эч кандай чек тобуна ээ жана биз бул конкреттүү CSS эреже менен чек жок деп ойлойбуз. Ошондуктан, бул жерде биз колдоно турган HTML класс болуп саналат:
класс = "эч кандай чек">
Андан кийин биз стилдин маннык стилди кантип кошууга болот:
-борбор чек {
чек-ара-сол: эч ким;
}
жадыбалда эле саптары ортосундагы чекти кантип кошуу
түркүктүн ортосуна сызыктарды кошуу менен бирге эле, сиз стилдин кошулган бир эле жөнөкөй стили менен аткара алабыз. Төмөндө CSS биздин столдун Ар бир катар нандын арасындагы тик сызыктарды кошот:
TR {
чек-ара-Төмөндө: катуу кара 1px;
}
Ал столдун түбүнөн чек алып, дагы бир жолу бул TR тег турган класс кошот:
класс = "эч кандай чек">
Сиздин стилдин маннык стили кошуу:
-борбор чек {
чек-ара-Төмөндө: эч ким;
}
стол конкреттүү мамыча же сапты ортосундагы чекти кантип кошуу
Эгер белгилүү бир катар же түркүктүн ортосуна сызыктарды келсе, ошол клеткалардын же катар классты колдонушубуз керек. Сиз бул тилкеде ар бир клеткага тобуна кошуу керек, себеби, эки түркүктүн ортосуна бир сапты кошумчалоо катар ортосунда бир аз кыйыныраак. Сиздин стол жазуусу пайда болсо кандайдыр бир CMS , бул мүмкүн эмес, бирок колу бет код бар болсо, бул таасир жетишүү үчүн зарыл болгон тиешелүү сабактарды кошуу мүмкүн.
класс = "чек-ара">
Силер болсо жип келет катарда тобуна кошуп алат, катарлардын ортосунда сызыктарды кошуу, деле турбайт.
класс = "чек-ара-ылдыйкы">
Ошондо стилдин үчүн CSS кошуу:
.border тарабында {
чек-ара-сол: катуу 1px кара;
}
.border-түбү {
чек-ара-Төмөндө: катуу кара 1px;
}
стол Жеке клеткалар даяр кошуу керек
Айрым камералардын айланасында саптарды кошуу үчүн, сиз тегерегине чек келет клеткаларга класс кошуу:
класс = "чек ара">
Ошондо сенин стилдин төмөнкү CSS кошуу:
.border {
Чек ара: катуу 1px кара;
}
бир үстөл коюлган ички клеткалар кантип кошуу
Эгер бир клетканын ичиндеги мазмунун саптарды кошуу үчүн керек болсо, бул жагы горизонталдуу эреже тег менен (<с>).
Пайдалуу кеңештер
Эгер чек кемчиликтерди байкап, анда чек ара-жыйноо стили сиздин үстөлдүн үстүнө экенин текшерип турушу керек. Сиздин стилдин төмөнкүдөй кошуу:
стол {
чек-ара-жыйноо: жыйноо;
}
Сиз жогоруда CSS бардык качууга жана стол тег чек касиетти колдоно аласыз. Бирок, анын сапаты, эскирип калган эмес, ал эми силер бир гана чек ара туурасын аныктоо гана үстөлдүн же эч ким бардык клеткалардын айланасында болушу мүмкүн эле, CSS кыйла аз ийкемдүү экендигин.