Создание таблицы в html
Пройдя первое, вводное занятие по верстке, мы приступаем ко второму. Здесь будем разбирать остальные важные элементы верстки и уделим много внимания построению таблиц и табличной верстки, которая применялась в прошлом.
План занятия
- Теги blockquote, pre, address
- Создание списков
- Верстка таблицы на примере
Блочная цитата blockquote
Рассмотрим такой элемент, как блочная цитата. Который может в себе содержать другие блочные и строчные элементы. Он отодвигает контент по обеим сторонам браузера на 40px. Пишется данный тег следующим образом:
1 |
<blockquote>Самым известным «рыбным» текстом является знаменитый Lorem ipsum.</blockquote> |
Элемент pre
Этот элемент имеет уникальную способность по отношению к пробельным символам. Другими словами, как вы напишете в коде, так и получите в оригинале страницы. Помимо этого этот элемент свое содержание отображает моноширинным шрифтом. Элемент блочный, а внутри можно ставить толькострочные элементы. И не стоит употреблять в этом элементе табуляции, лишь пробелы и Enter.
1 2 3 |
<pre>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница </pre> |
Элемент адрес
Элемент блочный, а внутри может содержать только строчные элементы. Предназначается только для отображения адреса и пишется следующим образом:
1 |
<p>Мой адрес: <address>г. Киев, ул. Русановская набережная 23, Телефон/факс: 2564-25-65</address></p> |
Вы так ее писать не будете ибо сделать курсивом можно с помощью css, это просто для примера я вам все показываю.
Работа со списками в html
Как и в обычном повседневном использование в текстовых документах встречаем списки, так и в веб нам предстоит с ними работать. Не только в прямом предназначении, но и в построении как простых, так и сложных многоуровневых меню. Давайте подробно рассмотрим их применение на примерах.
Нумерованные списки
Итак нумерованные списки создаются с помощью парного тега <ol>, но этого мало, чтобы содержимое стало списком, это основа, которая говорит нашему браузеру, что далее будет использоваться список. Внутри парного тега <ol> </ol> мы уже ставим второй парный тег <li> </li>, вот пример:
1 2 3 4 5 |
<ol> <li>Первый пункт списка</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> |
Выглядит оно вот так:
- Первый пункт списка
- Второй пункт
- Третий пункт
По умолчанию нумерация идет арабскими цифрами, но с помощью специального атрибута можно сменить на римскую нумерацию. Укажите атрибут для списка type и проставьте поочередно такие значения: a, A, i, I. Атрибут type применять не стоит, это я для примера показал. Все это мы будем делать с помощью css в дальнейшем.
Маркированный список
Здесь логика такая же, как и в нумерованном списке, только первым парным тегом есть уже не ol, а ul. Давайте все так же на примере посмотрим наш код:
1 2 3 4 5 |
<ul> <li>Первый пункт списка</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> |
Вы заметили, что все идентично нумерованному списку, кроме первого парного тега ul, который как раз и указывает браузеру на то, что далее идет маркированный список. Этот тег может также содержать атрибут type и иметь три типа значения: disc, circle, square. Проставьте все три значения в атрибутеtype и посмотрите на результат в браузере.
Вложенный список
Вложенный список, это когда один пункт списка может содержать дополнительные подпункты второго списка, я сейчас напишу пример нумерованного списка с вложенными подпунктами маркированного списка.
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li>Первый пункт списка <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> |
Здесь нужно понимать, что вложенный список нужно размещать внутрь тега li, в другом случае вложенность не сработает или может быть прочитана браузером не правильно. Потренируйтесь с созданием вложенного списка с применением атрибута type как к первому так и второму уровню списка.
Элементы sub и sup
Это два парные теги, которые используются для форматирования надстрочных и подстрочных элементов. Давайте рассмотрим их на практике:
1 2 |
H<sub>2</sub>O <br> <!-- Подстрочный элемент --> 32<sup>3</sup> <!-- Надстрочный элемент --> |
Такие теги используются обычно для построения формул, результат кода выглядит вот так:
H2O
323
Создание таблицы в html
Сейчас на простом примере мы с вами создадим таблицу в html без использования css оформления, выглядеть такая таблица будет не совсем красиво, но понятие ее создания у вас заложится в голове на всегда. Вот что у нас собственно и получится в конце:
Итак каркас таблицы начинается с парного тега <table> сразу пропишите и закрывающий тег. Если по простому, то сейчас мы лишь говорим нашему браузеру, что далее работа будет происходить только в таблице.
Следующим парным тегом мы указываем начало строки и пишется он вот так<tr> не забываем закрыть его, этот тег мы пишем внутри открывающего и закрывающего тега table. Когда строка создана, внутрь ее (между тегами tr) помещаем наши ячейки таблицы с помощью парного тега <td>, здесь следует обратить внимание на тот момент, что первая строка, которая обычно содержит заголовки столбцов создается с другим парным тегом, а именно<th>. Вот так сейчас должна выглядеть ваша начальная конструкция тегов таблицы:
1 2 3 4 5 6 7 8 |
<table> <tr> <th>Выберите курс обучения</th> <th>HTML CSS</th> <th>JavaScript</th> <th>PHP</th> </tr> </table> |
Количество парных тегов th указывает на будущее количество столбцов всей таблицы. Создаем следующую строку при помощи парного тега tr и в него уже помещаем четыре ячейки с помощью td. Помним, что в первой строке мы использовали не td,а th для указания заглавия столбцов. В результате у нас получится следующая конструкция:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <th>Выберите курс обучения</th> <th>HTML CSS</th> <th>JavaScript</th> <th>PHP</th> </tr> <tr> <td align="left">В офисе</td> <!-- основной тег ячеек таблицы --> <td><img src="" alt="Да" ></td> <td><img src="" alt="Да" ></td> <td><img src="" alt="Да" ></td> </tr> </table> |
Мы видим, что строка идет под строкой (теги tr), а уже внутри них созданы ячейки этих строк.
Проделайте добавление строк до тех пор, пока их количество не станет равным шести. При сохранении кода и открытии в браузере вы заметите лишь данные, а самой таблицы, ее границ не будет. Это потому, что по умолчанию рамка таблицы равна 0, чтобы это исправить нужно в самый первый открывающий тег таблицы table добавить атрибут border со значением 1px. Вот так это выглядит на практике:
1 |
<table border="1" width="650" cellpadding="8"> |
Вы заметили, что помимо атрибута border есть еще два других, сейчас я поясню их значение. Итак второй атрибут width обозначает ширину всей таблицы в px, ее также можно задавать в процентном соотношении. И третьим атрибутом есть cellpadding, который задает внутренние отступы в ячейках таблицы, что придает некую свободу содержимому всей таблицы.
Попробуйте убрать эти атрибуты поочередно, либо измените их значение в пикселях и вы заметите ощутимую разницу до и после. Чтоже таблица готова, осталось разобраться, как соединить две левые ячейки в пятом и шестом ряду.
За соединение ячеек отвечают два атрибута:
Атрибут rowspan — соединяет ячейки по вертикали (ряды), в значении атрибута указываем количество на которое нужно соединить ячейки, в нашем случае это две. Вторую соединяемую ячейку нужно удалить, чтобы не нарушилась верстка таблицы. Вот пример, как это должно выглядеть у вас в коде:
1 2 3 4 5 6 7 8 9 10 11 |
<tr> <td rowspan="2"></td> <td><strong>150 $</strong></td> <td><strong>200 $</strong></td> <td><strong>300 $</strong></td> </tr> <tr> <td><a href="#">Записаться</a></td> <td><a href="#">Записаться</a></td> <td><a href="#">Записаться</a></td> </tr> |
В первой строке 4 ячейки, а уже во второй три. Внутри первой ячейки в открывающем теге мы задали атрибут, который соединил обе ячейки. Чтобы у вас получилась таблица, как на скриншоте в начале разбора тегов таблицы, у вас должен получиться следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Верстка таблицы</title> </head> <body> <table border="1" width="650" cellpadding="8"> <!-- border="1" это атрибут рамки со значением 1px, cellpadding="8" это отступ внутри ячеек таблицы --> <tr> <!-- Ряд таблицы/строка --> <th align="left">Выберите курс обучения</th> <!-- теги ячеек шапки таблицы --> <th>HTML CSS</th> <th>JavaScript</th> <th>PHP</th> </tr> <tr align="center"> <td align="left">В офисе</td> <!-- основной тег ячеек таблицы --> <td><img src="images/yes.png" alt="Да" ></td> <td><img src="images/yes.png" alt="Да" ></td> <td><img src="images/yes.png" alt="Да" ></td> </tr> <tr align="center"> <td align="left">Онлайн</td> <td><img src="images/yes.png" alt="Да" ></td> <td><img src="images/yes.png" alt="Да" ></td> <td><img src="images/no.png" alt="Нет" ></td> </tr> <tr align="center"> <td align="left">Самому</td> <td><img src="images/yes.png" alt="Да" ></td> <td><img src="images/no.png" alt="Нет" ></td> <td><img src="images/no.png" alt="Нет" ></td> </tr> <tr align="center"> <td rowspan="2"></td> <!-- rowspan="2" Объединение по вертикали, рядов colspan="2" обединение по горизонтали--> <td><strong>150 $</strong></td> <td><strong>200 $</strong></td> <td><strong>300 $</strong></td> </tr> <tr align="center"> <td><a href="#">Записаться</a></td> <td><a href="#">Записаться</a></td> <td><a href="#">Записаться</a></td> </tr> </table> </body> </html> |
Аналогичным образом можно соединить ячейки и по горизонтали (столбцы) используя атрибут colspan. Проделайте это на практике самостоятельно. На этом наше занятие подходит к концу и я благодарю вас за внимание и желание учиться. Всего хорошего и до следующего занятия.
Leave a Reply