Метод 1: Коришћење ХТМЛ атрибута „видтх“.
„ ширина ” је основни атрибут који обезбеђује ХТМЛ. Он поставља ширину или хоризонталну дужину ХТМЛ елемента. Да бисте поправили податке табеле, атрибут ширине се користи у корацима испод.
Корак 1: Направите табелу
У ХТМЛ датотеци користите „ <центар> ” да бисте приказали сваки елемент унутар њега у центру веб странице. Унутар њега, направите табелу користећи „ <табле> ”,” <тр> ' и ' <тд> ” ознаке и упишите податке у њих:
< центар >
< сто >
< тр >
< тх > Име < / тх >
< тх > Статус < / тх >
< тх > Соба нема < / тх >
< / тр >
< тр >
< тд > Факхар < / тд >
< тд > Ученик < / тд >
< тд > 06 < / тд >
< / тр >
< тр >
< тд > Омар < / тд >
< тд > Ученик < / тд >
< тд > 06 < / тд >
< / тр >
< / сто >
< / центар >
Корак 2: Додајте ЦСС својства елементу „табела“.
Користите бирач елемената табеле у ЦСС-у и додајте „ граница ” од 1пк пуне црвене боје, “ Поравнање текста ” поравна текст са средином, а “ ширина ” који поставља укупну ширину табеле на 80%:
сто {
граница : 1пк пуна црвена;
текст- поравнајте : центар;
ширина : 80 %; }
Корак 3: Додељивање својстава елементу „тд“.
Користити ' тд ” селектор елемената и поставља „ граница-дно ” од 5 пиксела пуне црвене боје, “ паддинг ” од 20 пиксела да би ставка била уочљивија и „ ширина ” поставља као 30%:
тд {
бордер-боттом: 5пк пуна црвена;
паддинг:20пк;
ширина : 30 %;
}
Корак 4: Додељивање својстава 'тх' елементу
Користити ' тх ” бирач елемента за промену боје „ граница-дно ” од црвене до морско зелене за бољу визуализацију:
тх {
бордер-боттом: 5пк пуна морско зелена;
паддинг:20пк;
ширина : 30 %;
}
Излаз се приказује као:
Горњи снимак показује да су ширине свих колона фиксиране на 30% свака.
Метод 2: Коришћење селектора „нтх-цхилд( )“.
Својство нтх-цхилд() ЦСС-а се користи за креирање табеле фиксне ширине. Ово својство добија број колоне и бира „ <тд> ' и ' <тх> ' ознаке. На пример, ширина је „ фиксно ” само за бројеве колона “ 1 ' и ' 3 ”. Свака од ових колона добија ширину од 10%. Овај чланак је успешно показао како поправити ширину табеле података.
тд:нтх-цхилд ( 3 ) {ширина : 10 %;
}
тх:нтх-дете ( 1 ) {
ширина : 10 %;
}
Излаз горњег кодног блока је:
Овај излаз приказује да су бројеви колона 1 и 3 фиксирани на ширину од 10%.
Метод 3: Коришћење ознаке <цол>
Унутар ' сто ” одељак у ЦСС делу додајте „ распоред табеле: фиксни ” за подешавање „ширине“ елемената табеле са подацима:
сто {распоред табеле: фиксни;
ширина : 80 %;
граница : 1пк пуна црвена;
текст- поравнајте : центар;
}
У ХТМЛ датотеци додајте „ <цол> ” ознака унутар “ <табле> ” одељак. На пример, поправите ширину од 15% на прву колону и 30% на другу колону:
< сто >< цол стил = 'ширина: 15%;' / >
< цол стил = 'ширина: 30%;' / >
Након извршења горњег исечка кода, излаз је:
Тако корисник може поправити ширину елемената <тд> података табеле.
Закључак
Да бисте поправили ширину података табеле, користите „ ширина ” атрибут, “ н-то дете ( ) ” сепаратор и “ <цол> ” методе ознаке. „ ширина ” својство поставља фиксну ширину. Разделник „нтх-цхилд( )” добија број колоне као параметар. Штавише, „ <цол> ” ознака се може користити да табела не буде флексибилна. Овај чланак је показао како да поправите ширину елемената <тд> података табеле.