HTML таблици - Vertex Academy

Значението на таблиците в HTML5

Основни маркери на таблицата

Таблицата се състои от няколко необходими маркера:

Нека видим схематично как всичко се вписва в кода:

Тоест, за да създадем таблица с 3 колони и 4 реда, трябва да напишем елемента 4 пъти

Както можете да видите, нашата таблица няма граници по подразбиране. В HTML5 граници, цветове на граници, фонове и други се правят с CSS.

Не забравяйте, че HTML е отговорен за оформлението на уеб страниците, а CSS е за тяхното оформяне? Съвсем скоро ще ви разкажем колко красиви и сложни таблици са създадени в модерно оформление и в тази статия искахме да дадем тази база знания, която ще ви помогне да разберете точно оформлението на таблицата, а не да я обличате.

Съдържание на таблиците

За да назовете някак таблица, използвайте етикет, на английски заглавие.

В повечето случаи първият ред на таблицата описва стойностите, които ще отидат в колоните и по някакъв начин се открояват от останалите редове.

За това има специален HTML етикет

Моля, обърнете внимание, че данните в първия ред са получер и подравнени в центъра на колоните.

Понякога в таблици трябва да изберете не само първия ред, но и първата колона. Например по този начин:

Мислите ли, че има специален етикет и за това? Но не 🙂 Използва се същото като преди

Внимателният читател ще забележи, че първата клетка в първата колона е празна. Ако имате нужда от празна клетка в таблицата, все пак трябва да я създадете, просто не въвеждайте нищо между маркерите

Обединяване на клетки вертикално

Случва се съседните клетки да имат едни и същи данни и те могат да бъдат записани веднъж вместо няколко.

Атрибут Rowspan обединява клетки от съседни редове (т.е. вертикално).

Пример за обединени клетки:

Нека направим такава таблица. За да видим по-ясно сливането на клетки, ще начертаем граници за него. За целта ще използваме остарелите атрибути, които са зададени за маркера

---