HTML-таблицы являются основой структурированных данных в вебе. Они больше не используются только для электронных таблиц. Вы можете изменять их форму, цвет и точно контролировать, как они отображаются в окне браузера. Старый, проверенный метод опирается на специфические атрибуты представления. Он работает. Он прост и понятен. Вам не нужны сложные CSS-фреймворки, чтобы получить приличный макет.
Изменение цвета фона таблицы
Начните с общего вида. Хотите, чтобы вся сетка выделялась? Вам не нужна отдельная таблица стилей. Просто добавьте атрибут bgcolor к открывающему тегу
.
Пример:
Это задает основу. Каждая ячейка наследует этот стиль, если вы не переопределите его.
Вы также можете детализировать. Раскрасьте отдельную строку или конкретную ячейку. Добавьте bgcolor="color" в тег
или
| .
Пример:
|
Это небольшая деталь. Но она меняет то, как глаз воспринимает данные.
Размер таблицы
По умолчанию браузеры «ленивы». Они расширяют строки и столбцы, чтобы вместить содержимое. Если ваши данные короткие, таблица растягивается, чтобы заполнить окно. Если данные длинные, таблица становится длинной.
Иногда вам нужен контроль. Вы хотите фиксированные размеры.
Добавьте width и height в начальный тег
. Вы можете использовать пиксели или проценты.
Пример:
Пиксели дают жесткие ограничения. Проценты позволяют таблице адаптироваться к размеру окна просмотра. Какой вариант выбрать, зависит от ваших целей дизайна.
Вы также можете задать размеры для отдельных ячеек. Добавьте width="value" в тег
или
| . Это переопределяет глобальную настройку для конкретного места.
Экспериментируйте. Попробуйте значение в пикселях. Затем попробуйте значение в процентах. Посмотрите, как это работает или ломается на разных экранах.
Внутренний отступ (Cellpadding)
Пространство — это часть дизайна. В частности, пространство между краем ячейки и текстом внутри нее.
Это cellpadding. Он принимает значение в пикселях.
Используйте его в начальном теге
.
Пример 1:
Пример 2:
Пять пикселей — это плотно. Пятнадцать — это просторно. Контент ощущается по-разному. С большим отступом он выглядит чище.
Внешний отступ (Cellspacing)
Затем есть зазор между ячейками.
Это cellspacing. Он также принимает значение в пикселях.
Добавьте его в тег
.
Пример 1:
Пример 2:
Маленький cellspacing делает сетку плотной. Большой cellspacing создает вид, похожий на список задач.
Заголовки таблицы
Данным нужна структура. Заголовки обеспечивают эту структуру.
Чтобы выделить столбец или строку как заголовок, замените
на
| в первой строке.
Текст автоматически становится жирным и центрируется.
Пример:
| Столбец 1 |
Столбец 2 |
| A |
B |
| C |
| | | |
