Даведайцеся, як стварыць мяжу CSS табліцы ўсяго за пяць хвілін
Магчыма, вы чулі, што CSS і HTML табліцы не змешваюцца. Гэта проста не адпавядае рэчаіснасці. Так, з дапамогай HTML - табліцы для разметкі больш не дызайн лепшай практыка вэб, быўшы заменены стылямі макета CSS, але табліцы па - ранейшаму правільная разметка выкарыстоўваць для дадання таблічных дадзеных на вэб - старонку.
На жаль, таму што многія вэб-спецыялісты ўхіляліся ад сталоў, думаючы, што яны з'яўляюцца атрутай, многія з гэтых спецыялістаў маюць мала вопыту працы з гэтым агульным HTML элементам і барацьбы, калі яны павінны звяртацца з імі на вэб-старонцы. Напрыклад, калі ў вас ёсць табліца на старонцы, і вы хочаце дадаць ўнутраныя радкі ў вочках табліцы.
CSS Табліца межаў
Пры выкарыстанні CSS для дадання межаў да табліцах, гэта толькі дадае мяжу вакол знешняй табліцы. Калі вы хочаце дадаць ўнутраныя лініі ў асобныя вочкі гэтай табліцы, вам трэба дадаць межаў для ўнутраных CSS элементаў. Вы таксама можаце выкарыстоўваць HR тэг для дадання лініі ўнутры асобных клетак.
Для таго , каб прымяніць стылі , охватываемые ў гэтым артыкуле, вы павінны , відавочна , мець табліцу на вэб - старонцы. Затым вы павінны стварыць табліцу стыляў у якасці ўнутранага ліста стылю ў галаве дакумента (вы, верагодна , толькі зрабіць гэта , калі ваш «сайт» з'яўляецца адной старонкай) або прыкладаюцца да дакумента ў якасці знешняй табліцы стыляў (гэта тое , што вы будзе рабіць, калі ваш сайт некалькі старонак - дазваляе ўкладваць усе старонкі з аднаго знешняга ліста). Вы змесціце стылі, каб дадаць ўнутраныя лініі ў гэтую табліцу стыляў.
Перад пачаткам працы
Перш за ўсё, неабходна вырашыць, дзе вы хочаце, каб лініі з'явяцца ў табліцы. У вас ёсць некалькі варыянтаў, у тым ліку:
- Вакол усё клеткі ўтвараюць сетку;
- Размяшчэнне ліній паміж толькі калонамі;
- Проста паміж радамі; або
- Паміж канкрэтных радкоў або Стоўбцаў.
Вы таксама можаце размясціць лініі вакол асобных вочак або ўнутры асобных клетак.
Як дадаць лініі вакол усіх вочак у табліцы
Для таго, каб дадаць лініі вакол усіх вочак у табліцы, ствараючы гэтую сетку-эфект, дадайце наступныя радкі ў табліцы стыляў:
тд, е {
мяжы: цвёрды 1px чорны;
}
Як дадаць лініі толькі паміж Стоўбцы ў табліцы
Каб дадаць радкі паміж слупкамі (гэта стварае вертыкальныя лініі, якія бягуць зверху ўніз на слупках табліцы), дадайце наступныя радкі ў табліцу стыляў:
тд, е {
мяжы злева: цвёрды 1px чорны;
}
Тады, калі вы не хочаце , каб яны з'явіліся на першую калонцы, вам трэба будзе дадаць клас да гэтага ю і г.д клеткам. У гэтым прыкладзе мы мяркуем , у нас ёсць клас не-мяжы на гэтыя клеткі і прыбіраюць мяжу з гэтым больш пэўным правілам CSS. Дык вось клас HTML мы будзем выкарыстоўваць:
ня клас = "няма мяжы»>
І тады мы маглі б дадаць наступны стыль у нашай табліцы стыляў:
.Але мяжы {
мяжы злева: не;
}
Як дадаць радкі толькі паміж радкоў у табліцы
Як з даданнем лініі паміж слупкамі, вы можаце зрабіць гэта з дапамогай толькі адзін простага стылю дадаецца ў табліцу стыляў. Ніжэй CSS дадасць вертыкальныя лініі паміж кожным радком нашай табліцы:
тр {
Мяжа дна: цвёрды 1px чорны;
}
І, каб выдаліць мяжу з ніжняй частцы табліцы, вы б яшчэ раз дадаць клас да гэтага т.р. тэгу:
ня клас = "няма мяжы»>
Дадайце наступны стыль у табліцы стыляў:
.Але мяжы {
мяжа дно: не;
}
Як дадаць лініі паміж канкрэтнымі слупкамі і радкамі ў табліцы
Калі вы хочаце толькі лініі паміж канкрэтнымі радкамі або слупкамі, вы павінны выкарыстоўваць клас на гэтых вочках або радках. Даданне лініі паміж слупкамі крыху больш складана, чым паміж радкамі, таму што вы павінны дадаць клас да кожнай клетцы ў гэтай калонцы. Калі ваша табліца аўтаматычна генеруюцца з ў CMS якога - то , гэта не можа быць магчыма, але калі вы ручное кадаваннем старонкі, вы можаце дадаць адпаведныя класы па меры неабходнасці для дасягнення гэтага эфекту.
клас = «бакавы мяжы»>
Даданне радкоў паміж радкамі нашмат прасцей, так як вы можаце проста дадаць клас у радок, якую вы хочаце лінію на.
клас = "мяжы знізу»>
Затым дадаць CSS у табліцы стыляў:
.border бок {
мяжы злева: цвёрды 1px чорны;
}
.border дно {
Мяжа дна: цвёрды 1px чорны;
}
Як дадаць лініі вакол асобных вочак у табліцы
Для таго, каб дадаць лініі вакол асобных вочак, неабходна дадаць клас да клетак, якія вы хочаце рамку вакол:
клас = «межы»>
А затым дадайце наступны CSS у табліцы стыляў:
.border {
мяжы: цвёрды 1px чорны;
}
Як дадаць лініі ўнутры асобных вочак у табліцы
Калі вы хочаце дадаць радкі ўнутры змесціва ячэйкі, самы просты спосаб зрабіць гэта з дапамогай гарызантальнага правілы тэга (<ч>).
карысныя парады
Калі вы заўважылі прабелы ў вашых межаў, вы павінны пераканацца ў тым, што стыль мяжы калапсу усталяваны на вашым стале. Дадайце наступныя радкі ў табліцы стыляў:
табліца {
мяжы калапсу: крах;
}
Вы можаце пазбегнуць ўсіх вышэйпералічаных CSS і выкарыстоўваць атрыбут мяжы ў табліцы тэгаў. Усвядомце, аднак, што яго атрыбут, а не асуджаецца, значна менш гнуткі, чым CSS, як вы можаце толькі вызначыць шырыню мяжы і можа быць гэта толькі вакол усіх вочак табліцы ці не.