Как сделать границы таблицы в HTML


Оглавление (нажмите, чтобы открыть):

Границы, рамки и отступы HTML-таблиц

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

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

Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.

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

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

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге

применяется атрибут cellspacing . Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге

использовать атрибут cellpadding . И его значения это числа, означающие пиксельные размеры.

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

Результат в браузере

Таблица с измененными отступами и расстояниями:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= «10» — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге указать атрибут style со следующими значениями:

Границы HTML таблиц без CSS

Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.

Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].

Границы HTML таблиц без CSS
cellspacing=»2″ bgcolor=»#ff6600″

HTML / XHTML. Код:

Границы HTML таблиц без CSS
cellspacing=»8″ bgcolor=»#999999″

HTML / XHTML. Код:

Пример n.3 — для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne. Работает так же в других веб браузерах:

Границы HTML таблиц без CSS
cellspacing=»2″ bgcolor=»#999999″

HTML / XHTML. Код:

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, что бы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

В данном случае на самом деле имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. В настоящее время, аналогично тому, как обстоит дело с выравниванием содержимого страницы по центру с помощью тега table, этот способ полне работающий, пусть и устаревший в плане своей концепции.

Общая идея

1. Атрибут bgcolor тега table используется для того, что бы сделать фон таблицы определенного цвета.

2. Атрибут bgcolor тега tr используется, что бы сделать фон содержимого таблицы (строки и ячейки) определенного, отличного от фона таблицы, цвета.

3. Атрибут cellspacing тега table используется, что бы создать пространство в определенное число пикселов вокруг ячеек таблицы. Это пространство получает цвет, заданный атрибутом bgcolor тега table. Поскольку он отличается от фона строк и ячеек, то это создает вокруг ячеек визуальные границы цвета фона таблицы.

Упомянутые шаги создают в Arachne визуальные границы только между ячейками таблицы, а не вокруг них. И эти шаги не создают вообще никакой визуальной границы в Netscape 3.04-6.0 и Mozilla 0.6-0.92. Так что следует добавить еще одну таблицу вокруг первой.

Атрибут bgcolor тега table убирается из внутренней таблицы и прописывается во внешней. Значение атрибута cellspacing внешней таблицы устанавливается равным «0». Это создает требуемые визуальные границы и в Arachne, и в Netscape 3.04-6.0, Mozilla 0.6-0.92.

Данный метод работает не только в Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne, но так же в других веб браузерах, так что его можно использовать как универсальный способ.

Страница-пример для Internet Explorer 3.0 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Страница-пример для Netscape 3.04-6.0 и Mozilla 0.6-0.92 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Netscape Navigator 3.04 для Windows ( Cкачать )

Netscape Communicator 4.7 для Windows ( Cкачать )

Netscape Navigator 6.01 для Windows ( Cкачать )

Mozilla 0.6 для Windows ( Cкачать )

Mozilla 0.92 для Windows ( Cкачать )

Страница-пример для Arachne — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Arachne 1.70 для DOS ( Cкачать )

Arachne 1.95 для DOS ( Cкачать )

Так же в Opera 2.12 — 3.50, но с некоторыми недостатками.

Dillo — частично. Dillo не поддерживает атрибут height для td или tr. Сам прием создания визуальных границ в таблицах работает.

С некоторым недостатком.

Aliosque subditos et thema

Редирект с HTTP на HTTPS в случае, когда веб-сервер, выдающий страницы, находится за обратным прокси-сервером или балансировщиком нагрузки. Веб-серверы: Apache + nginx. Поддержка SSL включена. SSL-сертификат приобретен, одобрен и установлен. То есть, все настроено и работает. Так что осталось только сделать редирект с HTTP на HTTPS. Директивы для файла .htaccess: RewriteEngine On RewriteCond % !^www\. [NC] RewriteRule ^(.*)$ https://www.%/$1 [R=301,L] RewriteCond % !https [NC] RewriteRule ^(.*)$ https://%/$1 [R=301,L] Редирект с HTTP на HTTPS — Включить работу механизма преобразования: RewriteEngine On — Если доменное имя без www: RewriteCond % !^www\. [NC] — Тогда заменить его на домен с www: RewriteRule ^(.*)$ https://www.%/$1 [R=301,L] — Если HTTPS отсутствует: RewriteCond % !https [NC] — Тогда заменить домен без HTTPS доменом с HTTPS: RewriteRule ^(.*)$ https://%/$1 [R=301,L] Примечания 1. X_FORWARDED_PROTO может называться X-Forwarded-Proto или еще как-нибудь иначе. От обратного прокси-сервера или балансировщика нагрузки надо получить сведения о том первоначальном запросе, который он получает. Обратные прокси-сервера или балансировщики нагрузки могут предоставлять веб-серверу эту информацию. Может быть отправлен заголовок X_FORWARDED_PROTO или X-Forwarded-Proto или называемый как-то иначе, содержащий название протокола (HTTP или HTTPS). Так обычно. Но не всегда. Поэтому в каком-то числе случаев как именно получить название протокола возможно придется выяснять экспериментальным путем. 2. Другим вариантом может быть просто установить переменную среды (если для данного сервера это возможно): SetEnvIf X_FORWARDED_PROTO https HTTPS=on Тогда директивы для файла .htaccess будут такими: RewriteEngine On SetEnvIf X_FORWARDED_PROTO https HTTPS=on RewriteCond % !^www\. [NC] RewriteRule ^(.*)$ https://www.%/$1 [R=301,L] RewriteCond % !on [NV] RewriteRule ^(.*)$ https://%/$1 [R=301,L] 3. Документация Apache Module mod_rewrite (in English): https://httpd.apache.org/docs/current/mod/mod_rewrite.html

1 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS — 1 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по ширине и по высоте. Для более современных браузеров : [ Подробнее ] : [ Открыть страницу-пример ] 2 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS — 2 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по ширине и по высоте. Более консервативный, чем предыдущий вариант. Подходит не только для современных браузеров, но и для более старых. Таких как Internet Explorer 6 или ранние версии Maxthon. При необходимости что-то изменить, требует больше усилий, чем первый способ : [ Подробнее ] : [ Открыть страницу-пример ] 3 ) Горизонтальное выравнивание блока неизвестной ширины Горизонтальное выравнивание блока неизвестной ширины средствами CSS : [ Подробнее ] : [ Открыть страницу-пример ] 4 ) Position: absolute по центру Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS : [ Подробнее ] 5 ) Изображение по центру CSS Горизонтальное выравнивание изображения по центру с помощью CSS : [ Подробнее ] 6 ) Вертикальное выравнивание CSS Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения : [ Подробнее ] 7 ) Выравнивание по центру с помощью JavaScript и CSS Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью JavaScript и CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по вертикали и по горизонтали : [ Подробнее ] : Два случая : 1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024×768 : [ Открыть страницу-пример ] 2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024×768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы : [ Открыть страницу-пример ]

HTML таблицы — тег table

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

Таблица — один из основных инструментов для создания web-страниц.

Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт — первые шаги, то вы понимаете о чем речь.

Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:

Название таблицы

столбец 1 столбец 2 столбец 3
первый столбец первой строки второй столбец первой строки третий столбец первой строки
первый столбец второй строки второй столбец второй строки третий столбец второй строки
первый столбец третьей строки второй столбец третьей строки третий столбец третьей строки

Рассмотрим нашу таблицу с точки зрения HTML:

    сама таблица задается с помощью тегов ,

у таблицы есть название — теги ,

таблица состоит из строк — теги ,

каждая строка состоит из столбцов — теги ,

столбцы имеют названия, расположенные в первой строке — теги .

Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:

Таблицы в HTML

Таблицы довольно широко применяются при создании веб-страниц: они служат не только способом представления и упорядочения данных, но и являются инструментом форматирования страниц — их используют для создания каркаса страницы — применяют табличную верстку.

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

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

Создание таблицы: строки и ячейки. Заголовок таблицы

Таблица создается с помощью тега

— он открывает таблицу. Обязательный тег

информирует браузер о завершении таблицы.

Любая таблица состоит из столбцов и строк.

Тег

создает строку, а тег

ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег

также создает ячейку. Его отличие от тега

в том, что ячейка созданная тегом

является ячейкой — заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом

по умолчанию располагается в ее левой чаcти.

Тег создает заголовок таблицы, он располагается внутри тега

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

«700px» >
Заголовок таблицы

1-я ячейка 1-ой строки 2-я ячейка 1-ой строки
1-я ячейка 2-ой строки 2-я ячейка 2-ой строки
«img/peng_32.gif» > «img/peng_32.gif» >

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

1-я ячейка 1-ой строки 2-я ячейка 1-ой строки
1-я ячейка 2-ой строки 2-я ячейка 2-ой строки

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега

.

При помощи атрибут align Вы можете разместить таблицу в левой или правой ( align= «left» и align= «right» ) части окна браузера (родительского элемента) или по его центру ( align= «center» ).

Выравнивание содержимого строк (тег ) и ячеек (тег ) по горизонтали также осуществляется при помощи атрибута align , а по вертикали при помощи атрибута valign :

— атрибут align принимает значения left , right , center и justify , которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;

— атрибут valign , принимающий значения top , bottom и middle , задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.

Атрибут align служит также для выравнивания заголовка (тег ) по горизонтали и определения его расположения — над таблицей или под ней.

По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.

Высота и ширина таблицы и ячеек

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

Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно — при помощи атрибутов hieght и width соответственно.

Тег

, создающий строку таблицы не имеет атрибутов hieght и width . Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.

Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

— указывается целое положительное число. В этом случае размер будет задан в пикселях;

— указывается целое положительное число с символом %.

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

«600px» align= «center» >

«img/peng_64.gif» > «img/peng_64.gif» >
«250px» valign= «bottom» > «img/peng_64.gif» > «img/peng_64.gif» >
«img/peng_32.gif» > «img/peng_32.gif» >

Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

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

Атрибут border тега

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

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

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).

По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

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

Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).

«500px» >

Атрибут border не указан. Поэтому границы отсутствуют.
«img/peng_32.gif» > «img/peng_32.gif» >

«500px» border= «3px» >

Толщина границы таблицы составляет 3 пикселя. Ячейки имеют границы толщиной 1 пиксель!
«img/peng_32.gif» > «img/peng_32.gif» >

Атрибут border не указан. Поэтому границы отсутствуют.
Толщина границы таблицы составляет 3 пикселя. Ячейки имеют границы толщиной 1 пиксель!

Частичное отображение границ

Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

Атрибут frame тега

указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.

«500px» frame= «hsides» rules= «cols» >

Установлены горизонтальные границы таблицы
И отображены границы между колонками

Отступы внутри и снаружи ячеек

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

Внутренние отступы — от границ ячеек до их содержимого, задаются атрибутом cellpadding тега

.

Внешние отступы — расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing тега

.

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

«500» cellpadding= «10» cellspacing= «25» >

Расстояние от содержимого ячеек до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек до границы таблицы составляет 25 пикселей

Расстояние от содержимого ячеек до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек до границы таблицы составляет 25 пикселей

Объединение ячеек

При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега

.

Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.

Оба атрибута имеют смысл, если таблица состоит из нескольких строк.

«500» >

1 2
3 4

1 2
3 4

Фон таблицы. Фон ячеек таблицы

В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.

Атрибут background тега

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

Атрибут bgcolor тега

задает цвет фона таблицы. Цвет можно задать двумя способами (подробнее здесь. )

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

«100%» border= «1» bgcolor= «#FF6666» >

«63%» height= «200» background= «img/img.gif» > «37%» > Темно-розовый — цвет фона таблицы.
Фоновый рисунок отдельной ячейки — небо!

Темно-розовый — цвет фона таблицы.
Фоновый рисунок отдельной ячейки — небо!

Напомним также о существовании атрибута cols тега

, который указывает браузеру количество столбцов в таблице.

Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

Редактирование таблицы

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

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

Один из этих тегов располагают сразу после тега

. Допустим это тег .

При помощи атрибута span тега указывают количество колонок, к которым будут применены атрибуты align , valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок).

Если атрибут span в теге отсутствует, то будут изменены характеристики одной — первой колонки таблицы. При втором использовании тега задаются свойства для следующих (следующей — если атрибут span отсутствует) колонок таблицы и т.д.

«700px» border= «1» >
w > «250px» >
«2» w > «70px» >

1 2 3 4 5

Ко второй группе тегов относятся также практически идентичные между собой теги

,

и .

Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали — при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor .

При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.

CSS: Оформление таблиц

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег , представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом

.

Внутри тега

располагаются ячейки таблицы, представленные тегами или . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.


Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу

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

и

.

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

Попробовать »

Размер таблицы

После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

  • top: текст выравнивается по верхней границе ячейки
  • middle: выравнивает текст по центру (значение по умолчанию)
  • bottom: текст выравнивается по нижней границе ячейки

Попробовать »

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

3.4. Граница таблицы

3.4. Граница таблицы

В рассмотренном выше примере в таблице и ее ячейках отсутствовали границы. Граница таблицы создается с помощью атрибута border элемента TABLE. Ширина границы таблицы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Благодаря атрибуту bordercolor можно задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице черную границу шириной четыре пиксела.

Для этого изменим строку

Граница таблицы (и другие элементы сайта) в окне каждого браузера отображается по-разному. На рис. 3.5 показано, как созданная таблица отображается в окне стандартного браузера Internet Explorer, а на рис. 3.6 эта же таблица изображена в браузере Opera. Опытные веб-программисты стараются просматривать созданную страницу под разными типами браузеров, чтобы все везде выглядело одинаково. У каждого браузера свои капризы, так что создать сайт, чтобы все выглядело одинаково в любом браузере, – задача непростая.

Рис. 3.5. Отображение таблицы в окне Internet Explorer

Рис. 3.6. Отображение таблицы в окне Opera

Из рис. 3.5 видно, что между границами ячеек и внешней границей таблицы существует свободное пространство. Это пространство легко регулируется атрибутами cellspacing и cellpadding элемента TABLE. Атрибут cellspacing определяет расстояние между ячейками таблицы в пикселах, а атрибут cellpadding – между содержимым ячейки и ее границей.

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

Листинг 3.2. Код HTML-таблицы с нестандартными расстояниями между ячейками и границей

Как сделать границы таблицы в HTML

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

Из этого урока вы узнаете, как создать простую таблицу и управлять её свойствами (цвет, ширина, высота, толщина и цвет рамки, параметры ячеек ).

Для начала создадим простую таблицу, состоящую из четырёх ячеек, в которых будут написаны короткие фразы.

Перед этим нужно понять следующее:

• Теги – объявляют таблицу.
border=» « – устанавливает толщину рамки таблицы.
• Теги – определяют табличный ряд (по вертикали).
• Теги – определяют ячейку (по горизонтали).

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

После этого зададим таблице цвет и толщину рамки, какой-нибудь фон и цвет текста. Это делается с помощью CSS атрибутов в первом теге таблицы »

«

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

Параметр «color: » задаёт цвет текста, который будет написан внутри ячеек этой таблицы.

Отступы между ячейками и рамкой таблицы html

Существую два атрибута:

• cellspacing=» » – определяет расстояние между ячейками таблиц и рамкой самой таблицы.
• cellpadding=» » – определяет расстояние между границей ячейки и ее содержимым.

как изменить границы у таблицы html

Нам периодически нужна граница таблицы, либо нужно показать границу у таблицы, либо наоборот скрыть эту самую границу нашей таблицы, разберемся с этим вопросом!

Для обозначения границ существует определенный Атрибут.

И кстати в прошлый раз мы делали нашу первую таблицу.

Атрибут border – отвечает за границу таблицы.

Поставим значение данного атрибута равным одному пикселю:

Смотрим на нашу таблицу с бордюров в один пиксель.

Как сделать границу таблицы невидимой?

Для того, чтобы граница таблицы стала невидимой, нужно поставить значение данного атрибута равным нулю, либо просто удалите данный атрибут:

Для того, чтобы увидеть данную таблицу без границ, зальем задний фон(bgcolor=»#F5F5FE»>&)…

Смотрим на нашу таблицу с бордюров в ноль пиксель.

Если же, после того, как вы удалили, либо поставили значение border=»0″ — ничего не произошло, то значит свойства таблицы прописаны через css.

Проголосовать за статью!
Вы можете проголосовать за понравившуюся статью.(Используем только свои скрипты )
Еще никто не проголосовал
Нужно выбрать оценку

Друзья!
1.
Вся информация предоставляется бесплатно! Но мы потратили и деньги и время, и если вы сможете что-то сделать в ответ, то это будет очень великодушно с вашей стороны!
Мы живем за счет кликов по рекламе, но если вы ничего не нашли подходящего, то вы все еще можете помочь проекту!

1.a.
Друзья!
Всем огромное спасибо , кто нас поддерживает!

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 5. Создание таблицы в html

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

Рассмотрим теги для создания таблицы:

содержание

Результат:

Добавим границу для таблицы — атрибут border :

содержание

Результат:

Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td . Завершается таблица закрывающим тегом /table

Или пример таблицы посложнее:

Атрибуты тега TABLE

align left — таблица влево;
center – табл. по центру;
right — табл. вправо.
width 400
50%
bоrdеr ширина
bordercolor цвета рамки
сеllspacing ширина грани рамки
cellpadding внутреннее расстояние до рамки
bgсоlоr Цвет
#rrggbb
bасkground файл (фон таблицы)

Атрибуты тега TR — строки

align left , center , right выравнивание по горизонтали
valign top , middle , bottom , baseline выравнивание по вертикали
bgcolor цвет задний фон
bordercolor цвет цвет границы

Атрибуты тега TD или TH — ячейки

align left , center , right выравнивание по горизонтали
valign top , middle , bottom , baseline выравнивание по вертикали
width число или процент ширина ячейки
bgcolor цвет цвет фона
background файл файл фона
bordercolor цвет цвет границы
nowrap заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой
  • Тег caption служит для создания заголовка таблицы
  • Для группировки заголовочных ячеек используется тег thead
  • Для группировки основного содержимого таблицы используется тег tbody
  • Тег tfoot определяет нижнюю часть таблицы

таблица

.

Заголовок 1 3аголовок 2
содержимое содержимое

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

таблица с объединенными ячейками

3аголовок 1
заголовок 1.1 заголовок 1.2
заголовок 2 ячейка 1 ячейка 2
заголовок 3 ячейка 3 ячейка 4

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Рассмотрим на примере:

1-1 1-2 1-3 1-4 1-5
2-1 2-2 2-3 2-4 2-5

Атрибуты тега COLGROUP

align выравнивание содержимого столбца
  1. left — по левому краю (по умолчанию)
  2. center — по центру
  3. right — по правому краю

не работает в Firefox

dir определяет направление символов:

  1. ltr — слева направо
  2. rtl — справа налево

не работает в Firefox

span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
valign вертикальное выравнивание в ячейке таблицы

  1. bottom — по нижнему краю ячейки
  2. middle — по центру ячейки (по умолчанию)
  3. top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Таблица 1

Таблица 2 Ячейка 2-2
Ячейка 3-2 Ячейка 4-2
Ячейка 3-1 Ячeйкa 4-1

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

Как сделать границы таблицы в HTML

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

Получим:

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

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

Получаем:

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

Пример

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А в браузере

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

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

Результат

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

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

Результат

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

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

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

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

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

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

Результат

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

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

Результат

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

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

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

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

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

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

Мастер Йода рекомендует:  Web Audio и объёмный звуковой ландшафт реализация
Добавить комментарий