Tables таблица CSS уроки для начинающих академия
❮ Назад Дальше ❯
Внешний вид таблицы HTML может быть значительно улучшен с помощью CSS:
| Компания | Контакт | Страна |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Границы таблицы
Чтобы задать границы таблицы в CSS, используйте свойство border .
В приведенном ниже примере указывается черная граница для элементов <TABLE>, <th> и <TD>:
Пример
table, th, td {
border: 1px solid black;
}
Обратите внимание, что таблица в приведенном выше примере имеет двойные границы.
Это связано с тем, что оба элемента таблицы и <th> и <TD> имеют отдельные границы.
Свернуть границы таблицы
Свойство border-collapse задает, следует ли свернуть границы таблицы в одну границу:
Пример
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
}
Если требуется только граница вокруг таблицы, укажите только свойство
Пример
table
{
border: 1px solid black;
}
Ширина и высота таблицы
Ширина и высота таблицы определяются свойствами width и height.
В приведенном ниже примере устанавливается ширина таблицы 100%, а высота <th> элементов 50px:
Пример
table
{
width: 100%;
}
th
{
height: 50px;
}
Выравнивание по горизонтали
Свойство text-align задает выравнивание по горизонтали (например, влево, вправо или по центру) содержимого в <th> или <TD>.
По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <TD> выравнивается по левому краю.
В следующем примере выравнивание текста по левому краю в <th> элементах:
Пример
th
{
text-align: left;
}
Выравнивание по вертикали
Свойство vertical-align устанавливает вертикальную трассу (например, верхнюю, нижнюю или среднюю) содержимого в <th> или <TD>.
По умолчанию вертикальное выравнивание содержимого в таблице является средним (для элементов <th> и <TD>).
В следующем примере устанавливается выравнивание по вертикали текста по нижнему краю для элементов <TD>:
Пример
td
{
height: 50px;
vertical-align: bottom;
}
Заполнение таблицы
Чтобы управлять пространством между границей и содержимым в таблице, используйте свойство padding для элементов <TD> и <th>:
Пример
th, td
{
padding: 15px;
text-align: left;
}
Горизонтальные разделители
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Добавьте свойство border-bottom в <th> и <TD> для горизонтальных разделителей:
Пример
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Таблица
Используйте селектор :hover на <TR>, чтобы выделить строки таблицы при наведении указателя мыши:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Пример
tr:hover {background-color: #f5f5f5;}
Striped Таблицы
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Для таблиц, чередующихся с зебрами, используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:
Пример
tr:nth-child(even) {background-color: #f2f2f2;}
Цвет таблицы
В приведенном ниже примере указывается цвет фона и цвет текста <th> элементов:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | $150 | |
| Joe | Swanson | $300 |
Пример
th {
background-color: #4CAF50;
color: white;
}
Отзывчивый стол
Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого:
Добавьте элемент контейнера (например, < div >) с overflow-x:auto вокруг <TABLE> элемента, чтобы сделать его отзывчивым:
Пример
<div>
<table>
.
</table>
</div>
Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).
Другие примеры
Сделать причудливый стол
В этом примере демонстрируется создание причудливой таблицы.
Задание положения заголовка таблицы
В этом примере демонстрируется расположение заголовка таблицы.
Свойства таблицы CSS
| Свойство | Описание |
|---|---|
| border | Задает все свойства границы в одном объявлении |
| border-collapse | Указывает, следует ли свернуть границы таблицы |
| border-spacing | Определяет расстояние между границами соседних ячеек |
| caption-side | Задает размещение заголовка таблицы |
| empty-cells | Указывает, отображать ли границы и фон на пустых ячейках таблицы |
| table-layout | Задает алгоритм компоновки, используемый для таблицы |
❮ Назад Дальше ❯
Создаем красивые таблицы в HTML — отступы, фон, заголовок, выравнивание текста
Тема сегодняшней статьи — создание таблиц, их изменение.
Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!
Применение таблиц в HTML (см. также что такое html?) достаточно широкое. Можно применять их не только как логичную и понятную для человеческого глаза структуру данных в ячейках, строках и столбцах. При помощи таблиц можно еще очень удобно поместить информацию на странице.
Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.
Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.
Как в HTML сделать таблицу
Любая таблица содержит в себе строки и столбы. Они, в свою очередь, могут содержать текст и изображение.
Для добавления на страницу таблицы используется тег <table>.
Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать — </table>.
Строки и столбцы задаются при помощи тегов <tr> и <td>, при этом вместо <td> вы можете смело использовать <th>. Отличие <th> от <td> в том, что браузер отображает текст в ячейке <th> как жирный, а также выравнивает его по центру ячейки — т.е. можно использовать в заголовках таблицы, не прибегая к дополнительному форматированию. В остальном между ними нет разницы, можно использовать любой.
Строки таблицы (<tr></tr>) должны быть помещены строго между <table></table>. А столбцы таблицы (<td></td>) в свою очередь помещаются строго между тегами <tr></tr>.
Давайте создадим на практике таблицу, которая будет состоять из одной строки и четырех столбцов. Нам нужно обозначить начало таблицы (<table>), начало строки (<tr>), четыре ячейки (<td>), конец строки (</tr>), конец таблицы (</table>).
<table border=»1″>
<tr>
<td>Яч. 1</td>
<td>Яч. 2</td>
<td>Яч. 3</td>
<td>Яч. 4</td>
</tr>
</table>
Результат:
Теперь давайте используем тег <th>, чтобы больше не возвращаться к этому.
<table border=»1″>
<tr>
<td>Яч. 1</td>
<td>Яч. 2</td>
<td>Яч. 3</td>
<td>Яч. 4</td>
</tr>
</table>
Результат:
Я поставил ширину таблицы 400 и, как видите, первая и третья ячейка выделены жирным и выравниваются по центру. Остальные — по левому краю. Я рекомендую всегда уделять достаточное количество времени форматированию кода, чтобы не запутаться в нем. В маленькой таблице это может не играть большой роли, но вот в большой…
Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height.
Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).
Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.
Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).
Идем дальше.
Увеличиваем рамку (границы) таблицы и меняем ее цвет
Вы наверное заметили, я уже показал вам как можно работать с рамкой и шириной таблицы.
Вообще, по дефолту таблицы всегда отображается в браузере без рамки, а это не всегда удобно. Вот почему:
Согласитесь, как-то не очень. Но это не проблема для тех, кто уже знаком с HTML-атрибутом border, который я и использовал в примерах в начале поста.
Добавляем всего 1 атрибут и становится уже получше:
Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.
Как видите, border влияет только на внешнюю границу и обрамление таблицы, меняя ширину внешней рамки, а границы между ячейками таблицы оставляя прежними.
Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:
Как сделать отступы в таблице
Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут.
Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):
<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″>
<tr>
<td>Яч. 1</td>
<td>Яч. 2</td>
<td>Яч. 3</td>
<td>Яч. 4</td>
</tr>
</table>
Результат:
Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:
<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″ cellpadding=»10″>
<tr>
<td>Яч. 1</td>
<td>Яч. 2</td>
<td>Яч. 3</td>
<td>Яч. 4</td>
</tr>
</table>
Результат:
Теперь уберем «cellspacing» и оставим только «cellpadding».
Результат:
Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.
Как грамотно объединить ячейки в таблице
Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.
Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.
При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете. Сейчас покажу на примере.
При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.
Сейчас покажу на примере. Вот наша текущая таблица:
Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!
Принцип объединения такой.
При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)
При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.
Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.
<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″>
<tr>
<td colspan=»2″>Яч. 1 и 2</td>
<!—<td>Яч. 2</td>—>
<td>Яч. 3</td>
<td rowspan=»3″>Яч.
4, 8, 12</td>
</tr>
<tr>
<td rowspan=»2″>Яч. 5 и 9</td>
<td colspan=»2″>Яч. 6 и 7</td>
<!—<td>Яч. 7</td>—>
<!—<td>Яч. 8</td>—>
</tr>
<tr>
<!—<td>Яч. 9</td>—>
<td>Яч. 10</td>
<td>Яч. 11</td>
<!—<td>Яч. 12</td>—>
</tr>
</table>
Надеюсь понятно объяснил и привел хороший пример.
Как сделать заголовок у таблицы
Чтобы задать таблице заголовок — используйте теги <caption></caption> после начала таблицы (<table>), но до начала тега <tr>. Вот что получается:
Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:
<caption align=»bottom»>Как задать заголовок</caption>
И тогда заголовок таблицы переместится под таблицу.
Итак, мы рассмотрели почти все, за исключением… Фона!
Как сделать красивый фон у ячейки или всей таблицы
HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».
Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:
<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″ bgcolor=»lightgreen»>
Результат:
Ого, цвет фона ячеек стал очень даже «»lightgreen»». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:
<td rowspan=»3″ bgcolor=»white»>Ячейка 4, 8, 12</td>
Tada! Результат:
По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.
Еще хотел написать, как вставить картинку в качестве фона таблицы в HTML, но я уже упоминал об этом своей другой статье по ссылке выше.
Удачи и успехов в изучении HTML.
pretty-html-table · PyPI
pretty_html_table существует для преобразования кадра данных pandas в красивую таблицу html для использования в электронной почте. Предполагаемая целевая аудитория — это все, кому необходимо отправлять отчеты по электронной почте и кто хотел бы, чтобы их таблицы выглядели более привлекательно.
Доступно 12 различных цветовых тем. Вывод пакета хорошо встраивается в другие пакеты, используемые для отправки электронных писем в формате html, например, электронная почта или O365. Форматирование html задается на уровне строки DataFrame, что позволяет почти каждому провайдеру электронной почты анализировать его. Это устраняет необходимость вникать в то, как CSS может взаимодействовать с провайдером отправки/получения электронной почты.
Используйте pip для установки пакета:
pip install pretty_html_table
Простой пример загрузки файла Excel в кадр данных pandas, преобразования его в html и последующего сохранения в html-файл:
from pretty_html_table import build_table df = pd.read_excel('df.xlsx') html_table_blue_light = build_table (df, 'синий_свет') # Сохраняем в html файл с open('pretty_table.html', 'w') как f: f.write(html_table_blue_light) # Сравните с методом pandas .to_html: с open('pandas_table.html', 'w') как f: f.write(df.to_html())
Используйте любой браузер, чтобы открыть pretty_table.html , чтобы увидеть, как таблица будет выглядеть в электронном письме в формате html.
Зачем выбирать pretty_html_table?
Вывод готов к отправке через любой пакет Python, используемый для отправки электронной почты. Вставьте результат этого пакета в тело письма и вуаля.
Список доступных цветов
| Наименование | стиль шрифта | Заголовок | строк |
|---|---|---|---|
| ‘голубой_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-синий | Нечетный цвет фона: голубой / Четный цвет фона: белый |
| ‘синий_темный’ | Готический век | Жирный шрифт: да / Цвет фона: темно-синий / Цвет шрифта: белый | Нечетный цвет фона: голубой / Четный цвет фона: белый |
| ‘серый_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-серый | Цвет нечетного фона: светло-серый / Цвет четного фона: белый |
| ‘серый_темный’ | Готический век | Жирный шрифт: да / Цвет фона: темно-серый / Цвет шрифта: белый | Цвет нечетного фона: светло-серый / Цвет четного фона: белый |
| ‘оранжевый_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-оранжевый | Нечетный цвет фона: светло-оранжевый / Четный цвет фона: белый |
| ‘оранжевый_темный’ | Готический век | Жирный шрифт: да / Цвет фона: темно-оранжевый / Цвет шрифта: белый | Цвет нечетного фона: светло-оранжевый / Цвет четного фона: белый |
| ‘желтый_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-желтый | Нечетный цвет фона: светло-желтый / Четный цвет фона: белый |
| ‘желтый_темный’ | Век Готика | Жирный шрифт: да / Цвет фона: темно-желтый / Цвет шрифта: белый | Нечетный цвет фона: светло-желтый / Четный цвет фона: белый |
| ‘зеленый_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-зеленый | Цвет нечетного фона: светло-зеленый / Цвет четного фона: белый |
| ‘зеленый_темный’ | Готический век | Жирный шрифт: да / Цвет фона: темно-зеленый / Цвет шрифта: белый | Цвет нечетного фона: светло-зеленый / Цвет четного фона: белый |
| ‘красный_свет’ | Готический век | Жирный шрифт: да / Цвет фона: белый / Цвет шрифта: темно-красный | Цвет нечетного фона: светло-красный / Цвет четного фона: белый |
| ‘красный_темный’ | Готический век | Жирный шрифт: да / Цвет фона: темно-красный / Цвет шрифта: белый | Цвет нечетного фона: светло-красный / Цвет четного фона: белый |
Пример интеграции с пакетом O365
Сначала создайте функцию для отправки электронной почты:
из учетной записи импорта O365 # Никогда не вводите учетные данные в жестком коде и не храните их в репозитории.# Вместо этого используйте переменные окружения учетные данные = (o365credid, o365credpwd) учетная запись = учетная запись (учетные данные) def send_email (учетная запись, кому, тема, начало, тело, конец): m = account.new_message() m.to.add(к) m.subject = тема m.body = начало + тело + конец м.отправить()
# Вместо этого используйте переменные окружения
учетные данные = (o365credid, o365credpwd)
учетная запись = учетная запись (учетные данные)
def send_email (учетная запись, кому, тема, начало, тело, конец):
m = account.new_message()
m.to.add(к)
m.subject = тема
m.body = начало + тело + конец
м.отправить()
Затем создайте начало и конец письма в формате html:
start = """
<тело>
Таблица данных здесь:
"""
конец = """
"""
Наконец, мы можем использовать pretty_table_html для преобразования нашего файла Excel и отправки электронного письма:
from pretty_html_table import build_table
html_table_blue_light = build_table(pd.read_excel('df.xlsx'), 'blue_light')
send_email (учетная запись
, '[email protected]'
, 'тестовая таблица'
, начинать
, html_table_blue_light
, конец
)
Вот все доступные в настоящее время цвета:
Дополнительные аргументы
Теперь существует несколько необязательных аргументов, которые позволяют пользователю управлять шрифтом, размером шрифта и выравниванием таблицы:
-
font_size— принимает абсолютные ключевые слова (средний) и значения пикселей (20px) -
font_family— рекомендуется включать общее семейство шрифтов на случай, если клиент получателя не сможет отобразить выбранный шрифт. Пример ниже обозначает Open Sansв качестве шрифта, но обозначает общее семействобез засечекв качестве запасного варианта. Вполне возможно, что резервный шрифт может использоваться в случае, если у получателя заблокированы веб-шрифты по соображениям безопасности или если он просматривает электронную почту на клиенте, у которого нет доступа к шрифтам Google. -
text_align— принимает стандартные значения свойств HTML, такие какслева,справа,по центру,по ширине. -
ширина— принимает строковое представление пикселей. Например, чтобы столбцы имели ширину 100 пикселей, вы должны написать:. -
width_dict— принимает список строкового представления пикселей. Это будет работать только в том случае, если длина списка соответствует количеству столбцов вашего фрейма данных pandas. Например, вы можете указать следующий аргумент для функции: width_dict=[‘300px’,’auto’, ‘auto’, ‘auto’,’auto’, ‘auto’] только первый столбец будет изменен на 300px, другой будет «авто». -
индекс— логический. False по умолчанию. Если вы напишете index=True, индекс фрейма данных будет виден в вашей таблице. -
even_color— принимает строковое представление цветов («белый» или «FFFFF»). Например, чтобы цвет шрифта четных строк был белым, вы должны написать: even_color=’white’. -
цвет— принимает строковое представление цветов («белый» или «FFFFF»). Например, чтобы фоновый цвет четных строк был черным, вы должны написать: even_color=’black’. -
условия— принимает словарь, предоставляющий следующую информацию:: {'min':Ниже приведен пример, если имя столбца «Возраст», и мы хотим, чтобы возраст был представлен красным цветом, если им меньше 25 лет, и зеленым, если им больше 60 лет.,'max': ,'min_color': ,'max_color': } -
padding— принимает строку для установки отступов CSS в таблице (10px,0px 20px,0px 20px 0px 0px) -
odd_bg_color— принимает шестнадцатеричный или стандартный цвет для фона нечетной строки -
border_bottom_color— принимает цвет нижней границы заголовков
Пример ниже обозначает 
html_table = build_table(df
, 'желтый_темный'
, font_size = 'средний'
, font_family='Открытый шрифт без шрифта
, без засечек'
, text_align = 'левый'
,
, индекс = Ложь
, условия = {
'Возраст': {
'мин': 25,
«максимум»: 60,
'min_color': 'красный',
'max_color': 'зеленый',
}
}
, даже_цвет = 'черный'
, даже_bg_color='белый')
12 красивых примеров таблиц HTML для начинающих
12 примеров таблиц HTML для начинающих.
Используя эти примеры, начинающие разработчики могут попрактиковаться в атрибутах таблицы HTML, различных свойствах CSS, чтобы улучшить свои знания таблицы HTML и CSS. Эти примеры помогут пользователям понять следующие сценарии:
1) Граница таблицы HTML.
2) Цвет фона альтернативной строки HTML-таблицы.
3) HTML-таблица Альтернативный цвет фона столбца.
4) HTML-таблица Cellpading.
5) HTML-таблица Cellspacing.
6) HTML-таблица RowSpan.
7) HTML-таблица ColSpan.
1) Пример таблицы HTML — первый
Напишите программу для создания таблицы HTML со следующими выводами:
Подробнее
90 005
2) Пример HTML-таблицы — второй
Напишите программу для создания HTML-таблицы с использованием CSS со следующим результатом:
Подробнее
3) Пример HTML-таблицы – третий
Напишите программу для создания HTML-таблицы с границами ячеек с использованием CSS для создания следующего вывода:
Подробнее
4) Пример HTML-таблицы – четвертый
Напишите программу для создания HTML-таблицы с границами и чередующимися цветами фона строк с помощью CSS.