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

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

План занятия

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

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

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

<blockquote>Самым известным «рыбным» текстом является знаменитый Lorem ipsum.</blockquote>

1	<blockquote>Самым известным «рыбным» текстом является знаменитый Lorem ipsum.</blockquote>

Элемент pre

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

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

<pre>И даже с языками,

использующими латинский алфавит, могут возникнуть небольшие проблемы:

в различных языках те или иные буквы встречаются с разной частотой, имеется разница </pre>

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

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

<p>Мой адрес: <address>г. Киев, ул. Русановская набережная 23, Телефон/факс: 2564-25-65</address></p>

1	<p>Мой адрес: <address>г. Киев, ул. Русановская набережная 23, Телефон/факс: 2564-25-65</address></p>

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

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

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

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

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

<ol>
    <li>Первый пункт списка</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>

<ol>

<li>Первый пункт списка</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ol>

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

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

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

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

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

<ul>
    <li>Первый пункт списка</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ul>

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

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

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

<ol>
    <li>Первый пункт списка
        <ul>
            <li>Первый подпункт</li>
            <li>Второй подпункт</li>
            <li>Третий подпункт</li>
        </ul>
    </li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>

<ol>

<li>Первый пункт списка

<ul>

<li>Первый подпункт</li>

<li>Второй подпункт</li>

<li>Третий подпункт</li>

</ul>

</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ol>

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

Элементы sub и sup

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

H<sub>2</sub>O <br>    <!--  Подстрочный элемент    -->
32<sup>3</sup>         <!--  Надстрочный элемент    -->

1 2	H<sub>2</sub>O <br> <!-- Подстрочный элемент --> 32<sup>3</sup> <!-- Надстрочный элемент -->

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

H₂O
32³

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

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

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

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

<table>
    <tr>
        <th>Выберите курс обучения</th>
        <th>HTML CSS</th>
        <th>JavaScript</th>
        <th>PHP</th>
    </tr>
</table>

<table>

<tr>

<th>Выберите курс обучения</th>

<th>JavaScript</th>

</tr>

</table>

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

<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>

<table>

<tr>

<th>Выберите курс обучения</th>

<th>JavaScript</th>

</tr>

<tr>

<td align="left">В офисе</td>

</tr>

</table>

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

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

<table border="1" width="650" cellpadding="8">

1	<table border="1" width="650" cellpadding="8">

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

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

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

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

<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>

<tr>

</tr>

<tr>

<td><a href="#">Записаться</a></td>

</tr>

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

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Верстка таблицы</title>

</head>

<body>

<th align="left">Выберите курс обучения</th>

<th>JavaScript</th>

</tr>

<td align="left">В офисе</td>

</tr>

<td align="left">Онлайн</td>

</tr>

<td align="left">Самому</td>

</tr>

</tr>

<td><a href="#">Записаться</a></td>

</tr>

</table>

</body>

</html>

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