Створення таблиці в html

Найбільша загальна інформація про тегах hlml

Відображення будь-якого елементу поста (частина тексту, картинка, таблиця) в нашому блозі визначається тегами html, в які він укладений. Ось так: <тег> елемент поста Різні мови програмування по-різному ставляться до наявності закривають тегів (), Але ми не будемо вдаватися в подробиці і станемо писати їх всюди, бо краще «перебдеть», ніж «недобдеть».

Ще важливо знати, що теги можуть бути вкладені одна в одну, як матрьошки. І тут головне прослідкувати, щоб кожен тег мав свого закриває побратима. Ось так, наприклад:

<тег2> елемент поста

<тег3> елемент поста

Тут є основною тег, що визначає форматування всього шматка (<тег1>), І вкладені теги (<тег2>,<тег3>), Які відповідають за форматування його окремих елементів.

Якщо зрозуміти ці два основних правила роботи з тегами, то можна спокійнісінько розібратися з будь-яким форматуванням поста.

Створення таблиці в html

HTML-теги таблиці

Тепер перейдемо до конкретики і подивимося, з яких html-тегів складається будь-яка таблиця. Ось ілюстрація, на якій все теги позначені цифрами. Справа візуальне представлення цієї таблиці, щоб легше було співвіднести код з картинкою:

Створення таблиці в html

  1. - головний тег для створення таблиці. Як ми бачимо, з нього вона починається і закінчується
  2. - тег заголовка таблиці. Ми прописали для нього власний стиль (світло-жовтий фон і товсту рамку), щоб виділити цей рядок візуально
  3. - тег рядка. Будь-яка таблиця складається з рядків. У нашому прикладі їх дві: рядок заголовка, загорнута тегами , і звичайна рядок в тегах (див. нижче)
  4. - тег тіла таблиці. Власне, тіло - це все, що нижче голови (така анатомія html!). Він містить в собі всі рядки та клітинки, які будуть розташовані під заголовком
  5.
    - тег комірки в заголовку таблиці. У нашому прикладі в рядку заголовка розташоване 2 осередки ( «Заголовок 1" і "Заголовок 2")
  6. - тег комірки. У нашій таблиці є 2 звичайні комірки ( «дані 1" і "дані 2"). Для них прописаний власний стиль (відсутність фону і тонкі кордону)

    Зверніть увагу, що не існує html-тега для опису стовпчика таблиці. Але і наявних - цілком достатньо. Щоб підкоригувати стовпець (наприклад, задати йому певну ширину) - потрібно задати стиль для осередку, що знаходиться в цьому стовпці.

    Зрозуміло, що все таблиці - різні. У них різна кількість рядків і осередків, може знадобитися зробити якусь рядок або елемент - ширше, яскравіше і т.д. Не кажучи вже про те, що ми будемо розміщувати в кожну таблицю унікальну інформацію. Але все починається саме з такої схеми (є й інші додаткові теги, але зайве знання лише помножить нашу скорботу!).

    Вставляємо html-код таблиці в публікацію

    Для тих, хто не прописав власний стиль з назвою «mytable» в таблиці стилів style.php - зверніться до попередньої статті і зробіть це!

    Єдине, чим цей код відрізняється від того html-шаблону, який наведено на ілюстрації - це уточнення класу (class = "mytable») для основного тега таблиці (

    ). Так ми вказуємо, що до цієї таблиці потрібно застосувати саме той стиль, який ми описали в css. І тепер нам не потрібно буде навертати гори html-тегів, описуючи вид кожного осередку і рядки - браузер просто звернеться до таблиці стилів style.php і покаже таблицю такою, якою ми хочемо її бачити!

    Схожі статті