От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538
admin@sozdaj-sam.com

Создание таблицы в html

Создание таблицы в html

Создание таблицы в html

Пройдя первое, вводное занятие по верстке, мы приступаем ко второму. Здесь будем разбирать остальные важные элементы верстки и уделим много внимания построению таблиц и табличной верстки, которая применялась в прошлом.

План занятия

  • Теги blockquote, pre, address
  • Создание списков
  • Верстка таблицы на примере

Блочная цитата blockquote

Рассмотрим такой элемент, как блочная цитата. Который может в себе содержать другие блочные и строчные элементы. Он отодвигает контент по обеим сторонам браузера на 40px. Пишется данный тег следующим образом:

Элемент pre

Этот элемент имеет уникальную способность по отношению к пробельным символам. Другими словами, как вы напишете в коде, так и получите в оригинале страницы. Помимо этого этот элемент свое содержание отображает моноширинным шрифтом. Элемент блочный, а внутри можно ставить толькострочные элементы. И не стоит употреблять в этом элементе табуляции, лишь пробелы и Enter.

Элемент адрес

Элемент блочный, а внутри может содержать только строчные элементы. Предназначается только для отображения адреса и пишется следующим образом:

Вы так ее писать не будете ибо сделать курсивом можно с помощью css, это просто для примера я вам все показываю.

Работа со списками в html

Как и в обычном повседневном использование в текстовых документах встречаем списки, так и в веб нам предстоит с ними работать. Не только в прямом предназначении, но и в построении как простых, так и сложных многоуровневых меню. Давайте подробно рассмотрим их применение на примерах.

Нумерованные списки

Итак нумерованные списки создаются с помощью парного тега <ol>, но этого мало, чтобы содержимое стало списком, это основа, которая говорит нашему браузеру, что далее будет использоваться список. Внутри парного тега <ol> </ol> мы уже ставим второй парный тег <li> </li>, вот пример:

Выглядит оно вот так:

  1. Первый пункт списка
  2. Второй пункт
  3. Третий пункт

По умолчанию нумерация идет арабскими цифрами, но с помощью специального атрибута можно сменить на римскую нумерацию. Укажите атрибут для списка type и проставьте поочередно такие значения: a, A, i, I. Атрибут type применять не стоит, это я для примера показал. Все это мы будем делать с помощью css в дальнейшем.

Маркированный список

Здесь логика такая же, как и в нумерованном списке, только первым парным тегом есть уже не ol, а ul. Давайте все так же на примере посмотрим наш код:

Вы заметили, что все идентично нумерованному списку, кроме первого парного тега ul, который как раз и указывает браузеру на то, что далее идет маркированный список. Этот тег может также содержать атрибут type и иметь три типа значения: disc, circle, square. Проставьте все три значения в атрибутеtype и посмотрите на результат в браузере.

Вложенный список

Вложенный список, это когда один пункт списка может содержать дополнительные подпункты второго списка, я сейчас напишу пример нумерованного списка с вложенными подпунктами маркированного списка.

Здесь нужно понимать, что вложенный список нужно размещать внутрь тега li, в другом случае вложенность не сработает или может быть прочитана браузером не правильно. Потренируйтесь с созданием вложенного списка с применением атрибута type как к первому так и второму уровню списка.

Элементы sub и sup

Это два парные теги, которые используются для форматирования надстрочных и подстрочных элементов. Давайте рассмотрим их на практике:

Такие теги используются обычно для построения формул, результат кода выглядит вот так:

H2O
323

Создание таблицы в html

Сейчас на простом примере мы с вами создадим таблицу в html без использования css оформления, выглядеть такая таблица будет не совсем красиво, но понятие ее создания у вас заложится в голове на всегда. Вот что у нас собственно и получится в конце:

Создание html таблицы

Итак каркас таблицы начинается с парного тега <table> сразу пропишите и закрывающий тег. Если по простому, то сейчас мы лишь говорим нашему браузеру, что далее работа будет происходить только в таблице.

Следующим парным тегом мы указываем начало строки и пишется он вот так<tr> не забываем закрыть его, этот тег мы пишем внутри открывающего и закрывающего тега table. Когда строка создана, внутрь ее (между тегами tr) помещаем наши ячейки таблицы с помощью парного тега <td>, здесь следует обратить внимание на тот момент, что первая строка, которая обычно содержит заголовки столбцов создается с другим парным тегом, а именно<th>. Вот так сейчас должна выглядеть ваша начальная конструкция тегов таблицы:

Количество парных тегов th указывает на будущее количество столбцов всей таблицы. Создаем следующую строку при помощи парного тега tr и в него уже помещаем четыре ячейки с помощью td. Помним, что в первой строке мы использовали не td,а th для указания заглавия столбцов. В результате у нас получится следующая конструкция:

Мы видим, что строка идет под строкой (теги tr), а уже внутри них созданы ячейки этих строк.

Проделайте добавление строк до тех пор, пока их количество не станет равным шести. При сохранении кода и открытии в браузере вы заметите лишь данные, а самой таблицы, ее границ не будет. Это потому, что по умолчанию рамка таблицы равна 0, чтобы это исправить нужно в самый первый открывающий тег таблицы table добавить атрибут border со значением 1px. Вот так это выглядит на практике:

Вы заметили, что помимо атрибута border есть еще два других, сейчас я поясню их значение. Итак второй атрибут width обозначает ширину всей таблицы в px, ее также можно задавать в процентном соотношении. И третьим атрибутом есть cellpadding, который задает внутренние отступы в ячейках таблицы, что придает некую свободу содержимому всей таблицы.

Попробуйте убрать эти атрибуты поочередно, либо измените их значение в пикселях и вы заметите ощутимую разницу до и после. Чтоже таблица готова, осталось разобраться, как соединить две левые ячейки в пятом и шестом ряду.

За соединение ячеек отвечают два атрибута:

Атрибут rowspan — соединяет ячейки по вертикали (ряды), в значении атрибута указываем количество на которое нужно соединить ячейки, в нашем случае это две. Вторую соединяемую ячейку нужно удалить, чтобы не нарушилась верстка таблицы. Вот пример, как это должно выглядеть у вас в коде:

В первой строке 4 ячейки, а уже во второй три. Внутри первой ячейки в открывающем теге мы задали атрибут, который соединил обе ячейки. Чтобы у вас получилась таблица, как на скриншоте в начале разбора тегов таблицы, у вас должен получиться следующий код:

Аналогичным образом можно соединить ячейки и по горизонтали (столбцы) используя атрибут colspan. Проделайте это на практике самостоятельно. На этом наше занятие подходит к концу и я благодарю вас за внимание и желание учиться. Всего хорошего и до следующего занятия.

  1. vorobejvorobej06-29-2015

    Админ, а ты хорошо разбираешься в html и css? Можешь подсказать как сделать колонки на сайте одного размера в html+css для движка ВордПресс. Я знаю как то выравнивают через jquery, но я не знаю вообще языка. Может напишешь с картинками что да как, куда и где. Мысленно благодарен буду.

    • AndrejAndrej06-29-2015

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

      • vorobejvorobej06-29-2015

        Это называется — Эмулировать одинаковую высоту колонок. Сайт в подписи, там зона контента и правый сейдбар их подогнать под один размер.

  2. ИгорьИгорь09-29-2015

    С таблицами у меня всегда была проблема, как объединить колонки и строки? Никак не получается освоить. Автор, было бы неплохо, если под каждым примером вы поставили картинку как это будет отражаться.

Написать ответ

© 2016 Андриевский Андрей
Украина, город Киев
Тел: (063) 856-2538
E-Mail: admin@sozdaj-sam.com
Web: https://sozdaj-sam.com/