Креирање табеле у ХТМЛ-у

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

Креирање прве табеле

Отворите текст едитор као и обично, направите празан ХТМЛ фајл и залијепите сљедећи код између ознака:

  1 
  2 
  3 
  4 
  5 
  6 

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

Хајде да сортирамо описани код:

1. Тагс најавити претраживачу да је потребно креирати табелу.
2. Атрибут бордер дефинише границе табеле, а параметар 1 њихову дебљину у пикселима.
3. Уз помоћ поставите редове табеле.
4. Број ознака одређује број колона.
5. Бројеви између ознака су садржаји ћелија.

Ако желите да оставите ћелију празном, требали бисте у њој написати невидљиви знак, као што је размак, и не остављати га без икаквог садржаја. Ово је неопходно за исправан приказ празне ћелије од стране свих претраживача. Неки од њих могу искривити резултат, ако то није учињено.

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

Сет сизе

Горњи примјер је дао мали стол, незгодан за визуалну перцепцију. Можете прилагодити величину табеле потребним параметрима користећи два атрибута:

1. видтх - поставља ширину.
2. хеигхт - подешава висину.

Вредности ових атрибута могу бити пиксели или проценти. Неки претраживачи не раде исправно са процентима који се односе на атрибут висине. Због тога бисте требали тестирати код у неколико најчешћих:

• ИЕ.
• Мозилла Фирефок.
• Опера.
• Конкуерор.
• Сафари.

Ако је екран нетачан, потребно је променити вредност висине табеле у процентима од вредности у пикселима. Избор у корист пиксела може се направити и на основу тога што посетилац вашег сајта може да дође са уређаја који има мали монитор (мобилни телефон). Текст у ХТМЛ табели на монитору телефона ће бити прилагођен његовој величини. А ако су проценти постављени, табела ће бити тако мала да ће бити немогуће прочитати.

Користећи атрибуте ширине и висине, поставимо димензије: ширина ХТМЛ табеле је 300, а висина 200 пиксела:

  1 
  2 
  3 
  4 
  5 
  6 

Као резултат тога, прегледач ће приказати табелу са потребним димензијама:

Позиционирање

Значење ове акције је да лоцирате садржај ћелија и локацију табеле на веб страници. Међутим, ХТМЛ технологија у табелама постављеним на веб страници је ограничена на њихову локацију на левој страни (подразумевано), у центру и на десној страни користећи атрибут поравнања и вредности потребне за њега:

Синтакса је:

  ... 

У будућности, када учите ЦСС технологију, научит ћете како вертикално позиционирати елементе веб докумената.

Да бисте поставили локацију садржаја ћелије, исти атрибути са истим вредностима се примењују на ознаку. :

  ...   ... 
  садржај ћелија 

Ставите нашу таблицу удесно, и поравнајте садржај ћелија у центру:

  1 
  2 
  3 
  4 
  5 
  6 

Резултат би требао бити:

Стринг цонцатенатион

Да би направили неколико ћелија реда у једној ћелији, користи се атрибут цолспан са вредношћу која је једнака броју ћелија које се спајају. Следећи тагови се уклањају у коду. заједно са њиховим садржајем. Број ознака за брисање једнака вредности атрибута цолспан минус један.

Размотрите ово правило на основу примера. Претпоставимо да требате креирати таблицу у средини странице с произвољним бројевима величине 4 ступца и 3 реда. Затим спајајте ћелије 2 и 3 хоризонтално у другом реду тако да претраживач произведе следећи резултат:

Следећи код ће применити ову табелу у Веб документу:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Обратите пажњу на ХТМЛ код у табели у којој су две ћелије комбиноване:

  58   36   80 

Пошто је вредност параметра цолспан 2, 1 је обрисан. прати га (2 - 1 = 1) са свим њеним садржајем. Ако је било потребно комбиновати три ћелије, тада би се уклониле 2 ознаке. .

Придружи се колонама

Вертикалне ћелије су комбиноване употребом атрибута ровспан. Њиме се одређује број ћелија које треба резати вертикално. Ова тема представља највеће потешкоће за студенте.

Следећи метод је најлакше разумети: креирајте табелу и бројеве ћелија са различитим бројевима. На пример:

Код табеле ће бити следећи:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Ослободимо се двоцифрених бројева комбинујући колоне са бројевима 6 и 10, 7 и 11, 8 и 12. Оставите бројеве у вертикално комбинованим ћелијама: 6, 7 и 8.

Комбинирајте 6 и 10. У ознаци са бројем 6, прописати: и структуру 10 избрисати све. Слично томе, морате урадити и за преостале парове бројева. Као резултат, код ће се трансформисати на следећи начин:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Прегледач треба да направи табелу која нам је потребна:

Савет: док не постигнете аутоматску акцију када комбинујете колоне, користите овај метод користећи бројеве, замењујући их са жељеним подацима.

Садржај ћелије

Као што је горе поменуто, елементи ћелија могу бити било који ХТМЛ елементи. У табели ће, на пример, бити практична примена једноставне табеле воћа и цвећа:

Као што можете видети, ћелије у овој табели садрже текст, слике и попуњавање боје позадине. Елементи ћелије су применљиви и сви ХТМЛ тагови ће радити. Табела такође може садржати хипервезе у свим њиховим облицима (текст, линкови слика, итд.).

Посебно је неопходно прописати испуњавање ћелија бојом: пошто су празне, не садрже никакве податке, потребно је да региструјете празан простор: . У овом случају, ширина ћелије можда не одговара траженој. И скоро увек се дешава. У овом случају, на ову ознаку Атрибут видтх се примењује са захтеваном вредношћу: .

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

Заглавља табеле

Често постоји потреба за насловом табеле. Ово се ради помоћу посебне ознаке пара. . Налази се одмах након ознаке.

У прегледачу ће ова табела изгледати овако:

Поред назива табела, користите називе колона или редова користећи ознаку. . Текст у ХТМЛ табели која се налази између ових ознака биће приказана масним словима. Овом ознаком примењујемо атрибут спајања хоризонталних ћелија. Претворимо горњу табелу као пример, уносећи измене у код:

  Табела са бројевима 
  Чак и 
  Одд 
  2 
  1 
  4 
  3 
  6 
  5 

Као резултат, прегледач ће приказати заглавље са заглављем ступца:

Да бисте креирали бочне заглавља када су то елементи одређене колоне, ознака налази се одмах након ознаке пре прве ознаке .

Веб документ распореда табеле

Ово је најчешћи начин креирања веб страница. Суштина изгледа табеле је да ставите елементе на страницу сајта у ћелије користећи табеле. У овом случају, узимају се одвојени делови сајта (подножје, заглавље, тело), ​​који такође могу бити ћелије. У пракси се распоред табела изводи у већини случајева према следећем алгоритму:

• веб дизајнер припрема изглед странице;
• коришћењем графичких уредника или другог софтвера појединачни елементи распореда (дугмад, слике) се одсече и постају независни;
• веб програмер креира табелу елемената сајта како је дизајнирао дизајнер, остављајући ћелије празне;
• Веб програмер креира слику сајта из исечених елемената помоћу маркуп и веб програмских језика, пратећи функционалност и оперативност сваког од њих.

Изглед табеле сајта омогућава вам да лепо и логично направите садржај (садржај) да бисте посетиоцу који га је посетио обезбедио. Међутим, има два минуса:

1. Захтева велику количину кода.
2. То чини градилиште теже и смањује брзину његовог утовара.

Али понекад, да би се ускладио са техничким задатком са стриктним позиционирањем елемената, ХТМЛ изглед у табели постаје једино решење.