Создаем бесплатно сами то,
за что часто денег просят.
Украина
+380 63 85 62 538

Архив: Статьи

Создание таблицы в 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. Проделайте это на практике самостоятельно. На этом наше занятие подходит к концу и я благодарю вас за внимание и желание учиться. Всего хорошего и до следующего занятия.

Sitemap