Робота з html таблицями для новачків, трепачёв дмитрий

Підручник HTML CSS

  • Урок №.
    Практика
    по багатоколонкові макетів
  • Урок №.
    Практика
    на реальних макетах

просунутий курс

  • Урок №.
    проблеми
    кросбраузерності HTML і CSS
  • Урок №.
    просунуті
    властивості CSS
  • Урок №.
    Робота
    з HTML формами
  • Урок №.
    Робота
    з просунутими селекторами
  • Урок №.
    Робота з псевдо-
    класами і елементами

    просунуті речі

    • Урок №.
      Робота
      з плавними переходами transition
    • Урок №.
      Робота
      з анімацією на CSS
    • Урок №.
      CSS трансформації
      на площині
    • Урок №.
      CSS трансформації
      в обсязі
    • Урок №.
      Робота з мовою LESS
      програмування на CSS
    • Урок №.
      Робота з мовою SASS
      програмування на CSS

    Починаючи з цього уроку, я більше не буду приводити структуру всієї сторінки, вважайте, що ми завжди працюємо всередині тега body.

    Блок. Структура найпростішої таблиці

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

    В HTML таблиці створюються за схожим принципом. Там теж є стовпці і рядки з комірками, однак HTML код таблиць при першому погляді може здатися незвичним.

    Сама таблиця має жорстку структуру: головним є тег

    . всередині якого повинні лежати теги . які створюють ряди (рядки) таблиці, а всередині них - теги
    . які створюють осередки.

    Як ви бачите, немає тегів, які створювали б стовпці - таблиці створюються по рядах: спочатку перший ряд, потім другий і так далі.

    Вивчіть уважно наступний приклад з таблицею (тегу table доданий атрибут border. Який задає кордон таблиці і її осередкам):

    Так код буде виглядати в браузері:

    Те, що cellspacing має деяке значення за замовчуванням, часто може заважати вам. В цьому випадку слід просто поставити його в нуль.

    У HTML5 цей атрибут вважається застарілим (але він як і раніше надає відступ за замовчуванням). Замість нього слід використовувати спеціальне CSS властивість, про який ми поговоримо пізніше.

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

    Блок. Атрибут cellpadding

    Атрибут cellpadding задає відступ між текстом і межею осередку. У наступному прикладі я поставлю значення цього атрибута в 20px і тепер текст відійде від кордону осередків:

    Так код буде виглядати в браузері:

    Для порівняння наводжу те, як таблиця буде виглядати за замовчуванням:

    Атрибут cellpadding також має деяке значення за замовчуванням. Якщо воно вам заважає - обнуліть його.

    Цей атрибут, так само, як і cellspacing, вважається застарілим в HTML5.

    Блок. Обнуляємо cellpadding і cellspacing

    Давайте обнулив cellpadding і cellspacing і подивимося, що станеться з таблицею в цьому випадку:

    Так код буде виглядати в браузері:

    Як ви бачите, в даному випадку елементи таблиці злиплися. проте все одно помітно, що кожна клітинка має свою межу (тобто кордону зараз подвійні). Ви зможете поправити це, коли вивчите мову CSS.

    Блок. Додаємо ширину і висоту

    Існують також атрибути width і height. які дозволяють задати таблиці ширину і висоту таблиці відповідно (без цих атрибутів ширина і висота таблиці регулюються її вмістом: багато тексту - ширина велика, мало тексту - ширина маленька).

    Подивіться на приклад їх застосування:

    Так код буде виглядати в браузері:

    Значеннями атрибутів можуть виступати пікселі або відсотки. Значення у відсотках задаються таким чином: width = "30%" - в цьому випадку таблиця займе 30% ширини батька.

    Що вам робити далі:

    Приступайте до вирішення завдань за наступним посиланням: завдання до уроку.

    Коли все вирішите - переходите до вивчення нової теми.

    Підручник HTML CSS

    • Урок №.
      Практика
      по багатоколонкові макетів
    • Урок №.
      Практика
      на реальних макетах

    просунутий курс

    • Урок №.
      проблеми
      кросбраузерності HTML і CSS
    • Урок №.
      просунуті
      властивості CSS
    • Урок №.
      Робота
      з HTML формами
    • Урок №.
      Робота
      з просунутими селекторами
    • Урок №.
      Робота з псевдо-
      класами і елементами

      просунуті речі

      • Урок №.
        Робота
        з плавними переходами transition
      • Урок №.
        Робота
        з анімацією на CSS
      • Урок №.
        CSS трансформації
        на площині
      • Урок №.
        CSS трансформації
        в обсязі
      • Урок №.
        Робота з мовою LESS
        програмування на CSS
      • Урок №.
        Робота з мовою SASS
        програмування на CSS