Стъпка по стъпка ръководство за започване на HTML таблици

HTML таблица

Преглед

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

ЗАБЕЛЕЖКА: Вече добавих Styling с помощта на CSS, така че елементите ми ще изглеждат различно. Но те ще работят по абсолютно същия начин.
Ако искате да направите вашите елементи да изглеждат като моите, можете да намерите моя CSS файл в връзките, дадени по-долу:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Основна таблица

Можем да създадем HTML таблица с помощта на елемента таблица. Той има отварящ и затварящ маркер и обгръща всички редове на таблицата и клетките на таблицата вътре в него.

<Маса> 

Сега, нека въведем ред на таблицата. Таблиците са съставени от редове информация, които преминават през страницата. Елемент се използва за създаване на ред на таблица.

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

За да резюмирате:

  • : Елементът на таблицата представя данни в серия от редове и колони. Таблиците трябва да се използват само за показване на таблични данни и никога за оформление на страниците.
  • : Елементът от ред на таблицата дефинира ред клетки в таблицата. Редовете на таблицата могат да бъдат запълнени с клетки и таблица на заглавията на таблицата.
  • : Елементът от клетка на таблицата съдържа данни и представлява една клетка от една таблица. Всяка клетка на таблицата трябва да бъде вътре в ред на таблицата.елементи на ред таблица (<tr>) и клетка на таблицата (<td>) заедно, за да образуват таблица
    Забележка: елементите нямат атрибути. Ако сте работили с таблици преди, може би сте използвали някои атрибути в миналото. Всички те обаче вече са оттеглени.

    Елемент на заглавката на таблицата

    Създадохме основна таблица, но не е ясно, че първият ни ред в таблицата всъщност е опит за етикетиране на всяка наша колона. В момента първият ред просто прилича на друг ред в нашата таблица.

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

    Сега ще променим клетките на таблицата от първия ред в клетка на заглавките на таблицата. За целта ще заменим

    - Елементът на главата на таблицата (да не се бърка с елемента на клетката на заглавието на таблицата) определя набор от редове, които съставляват заглавката на таблицата.
  • - Елементът на тялото на таблицата дефинира един или повече редове, съставляващи основното съдържание (или „body“) на таблица.елементи на главата на таблицата (<thead>) и тялото на масата (<tbody>)

    Елемент крак на масата

    Имаме глава на масата и елемент на тялото на масата. Разбира се, има и елемент за краче на масата. Но въпросът е какъв е смисълът на елемента на колонтитула на таблицата, когато вече имаме заглавките на таблиците, които обозначават колони?

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

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

    - Елементът на долния колонтитул на таблица определя набор от редове, обобщаващи колоните на таблицата.елемент крак (<tfoot>)

    Надпис елемент

    Този елемент е основно заглавие на таблицата и трябва да дойде веднага след маркера на отварящата таблица. Това е хубаво да добавите, защото бързо обобщава какво може да съдържа таблица.

    Сега ние покрихме основните неща на елементите на таблицата в HTML.

    Можете да научите повече за таблиците в линковете, дадени по-долу.

    Надявам се да сте намерили тази публикация информативна и полезна. Ще се радвам да чуя вашите отзиви!

    Благодаря ви за четенето!

    highresolution-wallpapers.net © 2020
    с .

    Текстът в първия ред е по-смел от останалите редове поради <th> елемента, използван вътре в първия <tr>

    Глава и тяло за маса

    Подобно на структурата на нашия HTML документ, където имаме глава и тяло, ние също можем да добавим глава и тяло към нашата маса. Определено няма да използваме същите HTML елементи, защото тогава синтаксисът ще стане невалиден. За масата имаме <глава> за главата и <тяло> за тялото.