Уроки HTML

0
473
Уроки HTML

Создание таблиц, ширина, высота и границы

Таблицы в HTML – удобный инструмент для наглядного представления на странице сайта данных. Поскольку табличный формат создаётся при помощи простого и понятного кода, её часто используют в целях вёрстки. Предлагаемый урок 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: — тег цвета шрифта.

Внутри ячеек можно размещать текстовые блоки, изображения, ссылки и иной контент.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here