Задать цвет границы таблицы html

Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом TABLE>. Далее указываем, что сейчас будет строка, используя тэг TR>. А в этой строке будет три ячейки, и мы пишем три раза TD>…TD>.

Строка закончилась и мы должны ее закрыть TR>.

Теперь начинается новая строка, открываем TR>. Опять три ячейки — TD>…TD> записываем трижды. Строка закончилась TR>. Таблица закончилась TABLE>.

/*начало таблицы*/ /*начало строки*/ … /*первая ячейка*/ … /*вторая ячейка*/ …/*третья ячейка*/ /*конец строки*/ /*начало строки*/ … /*первая ячейка*/ … /*вторая ячейка*/ …/*третья ячейка*/ /*конец строки*/ /*конец таблицы*/

Но при записи этого кода мы не увидим каких-либо изменений. Нет границ, нет содержимого ячеек.

№ Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20

Как задать границу таблицы

Как изменить цвет границы

Изменим теперь цвет границы. Для этого в тэг TABLE> нужно внести атрибут BORDERCOLOR и указать значение цвета.

Зададим цвет для границы зеленый.

Смотрим результат:

Замечание. Если при этом не будет указан размер границы отличный от нуля, то границы все равно видно не будет.

Как задать ширину таблицы

Ширина каждого столбца задается по ее содержимому. Для того чтобы изменить размер таблицы, нужно задать значение ее ширины. Увеличим размер таблицы и зададим его значение в 400 точек.

Замечание. Размер таблицы можно указывать в точках

или в процентах (в процентах от размера окна браузера)

Причем, в-первом случае размер таблицы не будет меняться, а во-втором, размер таблицы будет зависеть от размера окна браузера.

Просмотрим результат в браузере:

Как выровнять таблицу

Не всегда таблица должна располагаться по левому краю. Давайте расположим наш справочник по центру, для этого перед таблицей установим тэг P ALIGN=”CENTER”>, а после таблицы его закроем:

№ Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20

Как закрасить таблицу

Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге TABLE> пропишем BGCOLOR и укажем цвет.

Наша страница будет иметь код:

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20

А в браузере

Как закрасить строку

Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.

Как закрасить ячейку

Дополним нашу таблицу данными еще нескольких человек

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20 2 Иван Петров 8-918-964-70-11 3 Афоня Ивлев 8-961-594-12-45

Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге TD> прописать атрибут BGCOLOR и указать цвет

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20 2 Иван Петров 8-918-964-70-11 3 Афоня Ивлев 8-961-594-12-45

В браузере вы увидите такую таблицу:

Как задать высоту таблицы (строки)

HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.

Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.

Для примера увеличим высоту первой строки

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20 2 Иван Петров 8-918-964-70-11 3 Афоня Ивлев 8-961-594-12-45

Как изменить ширину столбца

Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20 2 Иван Петров 8-918-964-70-11 3 Афоня Ивлев 8-961-594-12-45

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим выравнивание по центру, по середине.

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

Телефонный справочник № Фамилия Номер телефона 1 Фрося Бурлакова 8-952-987-13-20 2 Иван Петров 8-918-964-70-11 3 Афоня Ивлев 8-961-594-12-45

В браузере увидим:

Источник

HTML Границы таблицы

По умолчанию текст элементы выделены жирным шрифтом и центрированы.

Пример

Добавление границ

Чтобы добавить границу в таблицу, используйте CSS свойство border :

Пример

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.

Свернутые ганицы

Чтобы позволить границам свернуться в одну границу, добавьте CSS свойство border-collapse :

Пример

Добавление заполнения ячеек

Заполнение ячейки задает пространство между содержимым ячейки и ее границами.

Если вы не зададите заполнение, ячейки таблицы будут отображаться без заполнения.

Чтобы установить отступ, используйте CSS свойство padding :

Пример

Выравнивание заголовков по левому краю

По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы.

Чтобы выровнять заголовки таблиц по левому краю, используйте CSS свойство text-align :

Пример

Добавление интервал между границами

Расстояние между границами определяет расстояние между ячейками.

Чтобы задать интервал между границами таблицы, используйте CSS свойство border-spacing :

Пример

Примечание: Если таблица имеет свернутые границы, border-spacing это не имеет никакого эффекта.

Ячейка, охватывающая много столбцов

Чтобы сделать ячейку охватывающей более одного столбца, используйте атрибут colspan :

Пример

Ячейка, охватывающая много строк

Чтобы сделать ячейку охватывающей более одной строки, используйте атрибут rowspan :

Пример

Добавление подписи

Чтобы добавить подпись к таблице, используйте тег :

Пример

Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте атрибут id к таблице:

Пример

Теперь вы можете определить специальный стиль для этой таблицы:

И добавьте больше стилей:

#t01 tr:nth-child(even) <
background-color: #eee;
>
#t01 tr:nth-child(odd) <
background-color: #fff;
>
#t01 th <
color: white;
background-color: black;
>
Краткое содержание

Используйте в HTML элемент для определения таблиц

Используйте в HTML элемент чтобы определить строку таблицы

Используйте в HTML элемент для определения табличных данных

Используйте в HTML элемент чтобы определить заголовок таблицы

Используйте в HTML элемент чтобы определить надпись таблицы

Используйте в CSS свойство border чтобы определить границы

Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек

Используйте в CSS свойство padding чтобы добавить отступы для ячеек

Используйте в CSS свойство text-align для выравнивания текста в ячейке

Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками

Используйте атрибут colspan для создания ячейки охватывают множество столбцов

Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк

Используйте атрибут id для определения одной таблицы

HTML Упражнения

HTML Теги таблицы

Тег Описание

Определяет таблицу

Определяет заголовок ячейки в таблице

Определяет строки в таблице

Определяет ячейку в таблице

Определяет надпись таблицы

Задает группу из одного или нескольких столбцов в таблице для форматирования

Задает свойства столбца для каждого столбца в элементе

Группирует содержимое заголовка в таблице

Группирует содержимое тела в таблице

Группирует содержимое нижнего колонтитула в таблице

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Атрибут bordercolor

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Читайте также: Python excel xls xlsx