Создание таблицы в HTML. Как задать границы, заголовок, ширину и высоту?

создание таблицы в html. как задать границы, заголовок, ширину и высоту?

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

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

Для создания таблицы в HTML необходимо использовать элемент <table>. Структура таблицы определяется с помощью дополнительных элементов. Они располагаются между открывающим тегом <table> и закрывающим </table>.

Таблица должна иметь строки и столбцы. Для определения строки используйте элемент <tr>. Внутри него допустимо добавление любого количества ячеек, которые будут имитировать наличие столбцов. Ячейки создаются с помощью элемента <td>.

<!DOCTYPE html>
<html>
    <head>
        <!-- Стили отображения таблицы -->
        <style>
            table {
                border-collapse: collapse;
                border: 1px solid black;
            }
            td {
                border-bottom: 1px dashed darkgray;
                border-right: 1px solid black;
                padding: 10px 50px;
            }
            tr:first-child td {
                border: 1px solid black;
            }
        </style>

        <meta charset="utf-8">
        <title>Таблица услуг строительной компании</title>
    </head>
    <body>
        <h3>Список услуг:</h3>
        <table>
            <tr>
                <td>Название</td>
                <td>Цена</td>
            </tr>
            <tr>
                <td>Вывоз мусора</td>
                <td>1500руб</td>
            </tr>
            <tr>
                <td>Ремонт проводки</td>
                <td>5000руб</td>
            </tr>
            <tr>
                <td>Поклейка обоев</td>
                <td>2400руб</td>
            </tr>
        </table>
    </body>
</html>
Пример отображения созданной HTML-таблицы


рис 1. Отображение созданной таблицы

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

Заметка
Создание таблиц в HTML имеет много нюансов. Количество дополнительных элементов довольно велико. Поэтому в данной статье рассматриваются только общие вопросы. Далее в учебном курсе все аспекты работы с таблицами раскрываются более подробно.

Заголовок таблицы

Для определения заголовка таблицы используется элемент <caption>. Он должен находиться сразу за открывающим тегом <table>. Браузер отобразит текст заголовка с выравниванием по центру.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания заголовка таблицы</title>
    </head>
    <body>
        <table>
            <caption>
                Таблица 1. Пищевая ценность хлеба
            </caption>
            <tr>
                <td>сорт</td>
                <td>вода</td>
                <td>крахмал</td>
                <td>белок</td>
                <td>жир</td>
            </tr>
            <tr>
                <td>Ржаной</td>
                <td>47,0</td>
                <td>33,0</td>
                <td>6,6</td>
                <td>1,2</td>
            </tr>
        </table>
    </body>
</html>

Определение ширины и высоты

По умолчанию таблица имеет ширину, продиктованную её содержимым. Чтобы задать размеры явным образом, нужно использовать CSS. Для определения ширины таблицы существует свойство width, а для высоты соответственно height.

Вы можете добавить стили прямо в блок <head>. Тогда они будут действовать для всех таблиц на странице.

<head>
    <style>
        table {
            height: 100px;
            width: 70%;
        }
    </style>
</head>

Используя атрибут style элемента <table>, вы зададите высоту и ширину одной конкретной таблицы.

<table style="width: 70%; height: 100px"></table>

Изменение границ таблицы

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

Убрать пространство между границами ячеек и самой таблицы можно с помощью свойства border-collapse со значением collapse.

<head>
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>

Последние публикации