Создание таблиц, ширина, высота и границы
Таблицы в HTML – удобный инструмент для наглядного представления на странице сайта данных. Поскольку табличный формат создаётся при помощи простого и понятного кода, её часто используют в целях вёрстки. Предлагаемый урок HTML посвящён способам создания таблицы, определения в ней количества ячеек и рядов, а также её ширины и высоты.
Урок HTML использования таблицы для отображения данных
Задача: необходимо в табличной форме сделать простой прайс:
Примером решения может быть следующий код:
<table border=»4″>
<tr> (первый ряд ячеек)
<td> Наим. товара</td>
<td> В розницу</d>
<td>Оптом</td>
</tr>
<tr> (второй ряд ячеек)
<td>Тов. А</td>
<td>24</td>
<td>36</td>
<tr>(третий ряд ячеек)
<td>Тов. В</td>
<td>12</td>
<td>18</td>
</tr>
</table>
Значение тегов:
- Первый и последний теги (<table> и </table>) начинают и заканчивают код таблицы.
- Часть кода, расположенная между тегами <tr> и </tr>, определяет ряд ячеек <td> и </td>, количество которых можно увеличивать в соответствии с поставленной задачей. В нашем случае используются 3 ячейки. Ширина ряда ячеек ограничивается шириной страницы, что накладывает ограничения на количество ячеек в ряду и их допустимую ширину.
- Количество рядов ячеек может быть произвольным. В нашем случае теги, обозначающие ряд (<tr> и </tr>), употреблены 3 раза.
- Границу ячеек определяет элемент кода border, который в нашем случае составляет 4 пк. (<table border=»4″>).
Пропуск ячеек
Первый ряд определяет количество ячеек в остальных рядах. Если в последующих рядах (<tr> и </tr>) не будет прописано такое же количество ячеек (<td> и </td>), то пустые места для пропущенных ячеек всё равно останутся на странице.
Название
Розничная цена
Оптовая цена
Товар А
50
Товар Б
<table border=»3″> (начало таблицы, толщина границ – 3 пк)
Три ячейки в первом ряду:
<tr>
<td> Наименование товара </td>
<td> Розничная цена</td>
<td>Оптовая цена </td>
</tr>
Во втором ряду записано только 2 ячейки:
<tr>
<td>Товар А</td>
<td>50</td>
Одна ячейка в третьем ряду:
<tr>
<td>Товар Б</td>
</tr>
</table>
Добавление лишних ячеек во второй и последующие ряды
Если во второй и последующие ряды будет вписано больше ячеек, чем в первом, то это пустые места в на странице под новые столбцы:
Название
Розн.
Опт.
Куртки
900
450
Лишняя ячейка
Брюки
700
350
<table border=»4″> (первый тег таблицы, граница 4 пк)
В первом ряду прописано 3 ячейки:
<tr>
<td>Название</td>
<td> Розн.</td>
<td>Опт. </td>
</tr>
Во втором ряду прописано на 1 ячейку больше:
<tr>
<td>Куртки</td>
<td>900</td>
<td>450</td>
<td>лишняя ячейка</td>
В третьем ряду столько же ячеек, как и в первом:
<tr>
<td>Брюки</td>
<td>700</td>
<td>350</td>
</tr>
</tr>
</table>
Атрибуты ширины и высоты таблицы
Атрибуты ширины и высоты в таблице задаются в числовом значении, показывающим количество пикселей, или в %. Если они отсутствуют, то размеры таблицы определяются размером данных.
Задача: Имеющийся в табличной форме прайс сделать по ширине в 3/4 рабочего пространства страницы (75%), а по высоте – 180 пикселей. Границу сделать 5 пк :
Для решения вписываем в тег <table> атрибуты width и height в следующем виде:
<table border=»5″ width=»75%» height=»180″>
HTML урок: Изменения параметров таблицы и использование её инструментов для вёрстки
Несмотря на то, что для вёрстки страниц существуют специальные теги для создания блоков <div> </div>, табличный способ вёрстки широко используется из-за простоты кода. Он также позволяет размещать текст и изображения в отдельных блоках, которые имеют одинаковые размеры и симметричное расположение. Для изменения параметров таблицы используются следующие атрибуты:
- Cellspacing – определяет расстояние между ячейками.
- Cellpadding – указывает расстояние между содержимым внутри ячейки и её границами.
- background-color: — ввод параметра цвета фона ячейки, или таблицы.
- color: — тег цвета шрифта.
Внутри ячеек можно размещать текстовые блоки, изображения, ссылки и иной контент.
