Модеран ЦСС који можете користити за стилизовање своје ХТМЛ табеле

Додавање табеле на вашу веб локацију је користан начин да јасно представите велике количине информација. Табеле такође омогућавају ефикасно коришћење простора и омогућавају вам да лакше читате и упоређујете сложене податке.

Можете дизајнирати табеле да буду визуелно привлачније користећи ЦСС. То такође може побољшати опште корисничко искуство за вашу веб локацију.

Модеран дизајн појединачних редова и колона

Можете додати једноставан дизајн табеле са појединачним редовима и колонама и без спојених ћелија. Стилизовање табеле такође обезбеђује да ваша веб страница буде привлачна за корисника. Осим стила стола, постоје и други цоол ХТМЛ ефекти и ЦСС приказ изгледа веб локације можете додати на своју веб локацију.

Код за ову вежбу можете видети у њеном ГитХуб репо.

1. У нову ХТМЛ датотеку додајте основну структуру ХТМЛ кода:

   хтмл>
   <хтмл>
   <глава>
   <наслов>Мој једноставан стонаслов>
   глава>
   <тело>
   
   тело>
   хтмл>

2. Унутар тела додајте ознаке табеле:

   <сто>
   
   сто>

instagram viewer
3. Елемент ХТМЛ табеле треба да садржи ред табеле ознаке за сваки ред унутар табеле. Горњи ред се обично користи за наслове. Користите заглавље табеле ХТМЛ ознаке које представљају сваку колону у табели:

   <тр>
   <тх>Заглавље 1тх>
   <тх>Заглавље 2тх>
   <тх>Заглавље 3тх>
   тр>

4. Додајте још редова испод реда заглавља. Користите табеларни подаци ХТМЛ ознаке за додавање података у сваку ћелију у табели:

   <тр>
   <тд>1. ред, 1. колонатд>
   <тд>1. ред, 2. колонатд>
   <тд>1. ред, 3. колонатд>
   тр>
   <тр>
   <тд>2. ред, 1. колонатд>
   <тд>2. ред, 2. колонатд>
   <тд>2. ред, 3. колонатд>
   тр>
   <тр>
   <тд>3. ред, 1. колонатд>
   <тд>3. ред, 2. колонатд>
   <тд>3. ред, 3. колонатд>
   тр>
   <тр>
   <тд>4. ред, 1. колонатд>
   <тд>4. ред, 2. колонатд>
   <тд>4. ред, 3. колонатд>
   тр>
   <тр>
   <тд>5. ред, 1. колонатд>
   <тд>5. ред, 2. колонатд>
   <тд>5. ред, 3. колонатд>
   тр>

5. Додајте ознаку стила унутар ознаке хеад. Додајте неки општи стил у табелу, као што су сенке, заобљени углови стола, фонтови и маргине:

   <стил>
   сто {
   граница-урушавање: колапс;
   ширина: 100%;
   боја: #333;
   породица фонтова: Ариал, Санс Сериф;
   фонт-сизе: 14пк;
   Поравнање текста: лево;
   граница-радијус: 10пк;
   преливати: сакривен;
   кутија-сенка: 0 0 20пкргба(0, 0, 0, 0.1);
   маргина: ауто;
   маргин-топ: 50пк;
   маргина-дно: 50пк;
    } 
   стил>

6. Стилизирајте заглавље табеле да бисте му дали боју позадине и поравнат текст:

   стотх {
   боја позадине: #фф9800;
   боја: #ффф;
   фонт-веигхт: одважан;
   паддинг: 10пк;
   тект-трансформ: велика слова;
   словни размак: 1пк;
   граница-врх: 1пкчврст#ффф;
   граница-дно: 1пкчврст#ццц;
   }

7. Стилизирајте редове табеле тако да се смењују између сиве и беле боје и да додате ефекат када пређете мишем преко реда:

   стотр:нтх-дете (чак)тд {
   боја позадине: #ф2ф2ф2;
   }
   стотр:лебдетитд {
   боја позадине: #ффедцц;
   }

8. Стилизирајте податке унутар ћелија табеле:

   стотд {
   боја позадине: #ффф;
   паддинг: 10пк;
   граница-дно: 1пкчврст#ццц;
   фонт-веигхт: одважан;
   }

9. Отворите своју ХТМЛ датотеку да бисте видели табелу у веб прегледачу:

Дизајн стола са више линија

Неке табеле садрже колоне са спојеним редовима да би се формирала ћелија са више редова.

1. Уклоните све тренутне редове табеле, задржавајући само горњи са насловима:

   <сто>
   <тр>
   <тх>Заглавље 1тх>
   <тх>Заглавље 2тх>
   <тх>Заглавље 3тх>
   тр>
   сто>

2. Направите ћелију са више линија користећи атрибут ровспан. Ово ће проширити ту ћелију преко наведеног броја редова.

    Секција 1 
   <тр>
   <тдраспон редова="2">Вишелинијска ћелијатд>
   <тд>1. ред, 2. колонатд>
   <тд>1. ред, 3. колонатд>
   тр>
   <тр>
   <тд>2. ред, 2. колонатд>
   <тд>2. ред, 3. колонатд>
   тр>

3. Када додајете другу вишећелијску линију са различитом вредношћу распона реда, додајте одговарајући број редови табеле ХТМЛ ознаке. Ово треба да одговара висини или броју редова преко којих се ћелија простире. На пример, ако ћелија има распон редова од 3, мораћете да додате три реда другим колонама да бисте правилно поравнали табелу.

    Одељак 2 
   <тр>
   <тдраспон редова="3">Вишелинијска ћелијатд>
   <тд>3. ред, 2. колонатд>
   <тд>3. ред, 3. колонатд>
   тр>
   <тр>
   <тд>4. ред, 2. колонатд>
   <тд>4. ред, 3. колонатд>
   тр>
   <тр>
   <тд>5. ред, 2. колонатд>
   <тд>5. ред, 3. колонатд>
   тр>

4. Отворите своју ХТМЛ датотеку да бисте видели табелу у веб прегледачу:

Дизајн обједињене табеле редова

Слично ћелијама са више редова, табеле такође могу имати редове који се спајају у више колона.

1. Уклоните све тренутне редове табеле, задржавајући само горњи са насловима:

   <сто>
   <тр>
   <тх>Заглавље 1тх>
   <тх>Заглавље 2тх>
   <тх>Заглавље 3тх>
   тр>
   сто>

2. Додајте још редова табеле у табелу. Користите атрибут цолспан да спојите један од редова у 3 колоне:

    Секција 1 
   <тр>
   <тдстил="боја позадине: #ффедцц"цолспан="3">К1тд>
   тр>
   <тр>
   <тд>2. ред, 1. колонатд>
   <тд>2. ред, 2. колонатд>
   <тд>2. ред, 3. колонатд>
   тр>
   <тр>
   <тд>3. ред, 1. колонатд>
   <тд>3. ред, 2. колонатд>
   <тд>3. ред, 3. колонатд>
   тр>
   <тр>
   <тд>4. ред, 1. колонатд>
   <тд>4. ред, 2. колонатд>
   <тд>4. ред, 3. колонатд>
   тр>

3. Додајте још један спојени ред да бисте одвојили делове табеле:

    Одељак 2 
   <тр>
   <тдстил="боја позадине: #ффедцц"цолспан="3">К2тд>
   тр>
   <тр>
   <тд>6. ред, 1. колонатд>
   <тд>6. ред, 2. колонатд>
   <тд>6. ред, 3. колонатд>
   тр>
   <тр>
   <тд>7. ред, 1. колонатд>
   <тд>7. ред, 2. колонатд>
   <тд>7. ред, 3. колонатд>
   тр>
   <тр>
   <тд>8. ред, 1. колонатд>
   <тд>8. ред, 2. колонатд>
   <тд>8. ред, 3. колонатд>
   тр>

4. Отворите своју ХТМЛ датотеку да бисте видели табелу у веб прегледачу:

Користите атрактивне табеле да бисте најбоље искористили своје податке

ХТМЛ табеле су одличан начин за приказивање структурираних података на вашој веб локацији. Можете их стилизовати помоћу ЦСС-а да бисте побољшали подразумевани изглед. Међутим, уверите се да се не заносите и користите табеле за распоред – из разлога приступачности, чувајте их искључиво ради података.

Веће табеле могу бити напорне за креирање и ажурирање, посебно ако користите колоне и редове који се протежу. Можете написати сопствени код да бисте генерисали ознаке или искористили повољније синтаксе као што је Маркдовн.