Html высота ячейки таблицы

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

В наш html код, мы добавили таблицу с тремя строками и двумя столбцами, в результате, мы получили следующий код страницы:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.1Final//EN"> 	<html> 	<head> 	<title>Как создать сайт в блокноте</title> 	<meta http-equiv="Content-Type"content="text/html; charset=windows-1251"> 	</head> 	<body> 	<table align="center" width="65%" cellspacing="0" cellpadding="0" border="1"> 	<tr> 	 <td align="center" colspan="2">Header</td> 	</tr> 	 <tr> 	 <td>Меню сайта</td> 	 <td>Контент</td> 	 </tr> 	 <tr> 	 <td align="center"colspan="2">Footer</td> 	 </tr> 	</table> 	</body> 	</html>    

 

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

Откроем html справочник и найдем описание тега TD. Для задания цвета фона ячейки таблицы используется параметр bgcolor, аргументом данного параметра является цвет, заданный названием (например, bgcolor=”red”) или выраженный шестнадцатеричным кодом перед которым ставится знак решетки (например, bgcolor=”#add2ea”).

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

<td align="center" colspan="2" bgcolor="#add2ea">Header</td>

 

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

Цвет ячейки таблицы, заданный с помощью параметра bgcolor,является однотонным.

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

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

Для того, чтобы в качестве фона ячейки таблицы использовать рисунок, мы используем параметр тега TD с названием background.


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

Это свойство параметра background широко используется для создания фона ячеек таблицы с помощью картинок с малыми размерами.

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

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

В эту папку скопируем картинку header.jpg. На диске данная картинка занимает 878 байт, ее высота равна 79 пикселей, ширина 10 пикселей.

Скачать картинку для фона можно с моего сайта бесплатно по прямой ссылке:

Скачать картинку для фона таблицы в архиве – header.zip

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

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

Вновь откроем описание тега TD в html справочнике.

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

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

<td align="center" colspan="2" bgcolor="#add2ea" height="79px">Header</td>    

Сохраним изменения в блокноте и обновим окно браузера. Мы увидим, что ячейка заголовка стала выше.

Продолжим редактирование html кода нашей страницы. Теперь зададим фон для ячейки заголовка.

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

<td align=»center» colspan=»2″ bgcolor=»#add2ea» background=»img/header.jpg» height=»79px»>Header</td>

Где код background=»img/header.jpg»– делает фоном ячейки картинку header.jpg.

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

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

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

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


В следующем уроке мы продолжим создавать сайт в блокноте.

Перейти к Уроку 12: Шрифт в HTML

Перейти к Уроку 10:html таблица

Автор: Виктор Милованов.

sozdavaite-sait.ru

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

Для создания простой HTML-таблицы надо использовать три типа тегов, это <TABLE>, <TR> и <TD>. Поэтому давайте сделаем так: посмотрите на пример указанный ниже и попробуйте самостоятельно догадаться, какие теги и для чего нужны.

Пример создания таблиц в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Создание HTML-таблиц</title> </head> <body>  <table>  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>  </table> </body> </html>    

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

Теперь проверим ваши догадки. И опять вам говорю — не старайтесь все запоминать, не надо, главное — понять. Итак:

Тег <TABLE>…</TABLE> — это корневой элемент любой таблицы, между открывающим и закрывающим тегами которого находятся все остальные теги. Он является блочным, то есть создает до и после себя переводы строк в начало. А вот содержать он не может ни блочные, ни встроенные (уровня строки) теги, а только специальные теги таблицы из которых практически всегда используется <TR>, а остальные крайне редко. Не забыли еще, что значит «содержать»? Это значит, что в <TABLE> на первом уровне вложенности запрещено указывать встроенные или блочные теги.

Тег <TR>…</TR> используется для создания рядов (строк) таблиц и может содержать только теги ячеек, о которых мы поговорим дальше.

Тег <TD>…</TD> создает ячейки таблиц и должен располагаться только внутри тега <TR>. А вот содержать он может, внимание, и блочные, и встроенные элементы, в том числе и обычный текст. Кстати, обратите внимание, что в таблицах не существует тегов создания столбцов (колонок), потому что они формируются из элементов <TD>.

Тег <TH>…</TH>. Да, его нет в нашем примере, так как это практически аналог тега <TD> и применяется вместо него, когда необходимо сделать заголовочные ячейки. Такие ячейки отличаются от обычных только тем, что браузеры выделяют в них текст жирным шрифтом и располагают содержимое по центру.

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


HTML-таблицы по центру, слева, справа

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

В прошлом у тега <TABLE> имелся атрибут align, с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры — неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style.

Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style="margin:сверху справа снизу слева". Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой — все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.


И самое главное — не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». 🙂

Пример расположения таблицы по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>HTML. Таблица по центру</title> </head> <body>  <table style="margin:0 auto 0 auto">  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>  </table> </body> </html>

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

Изменение ширины HTML-таблиц и ячеек

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


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

А вот атрибута width для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS).

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

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

В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки — вы меняете ширину всего столбца.

Пример изменения ширины HTML-таблиц и ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Ширина HTML-таблицы и ячеек</title> </head> <body>  <table width="70%" border="2">  <tr><th style="width:60%">Ячейка 1.1</th><th>Ячейка 1.2</th></tr>  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>  </table> </body> </html>    

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

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

Изменение высоты HTML-таблиц и ячеек

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

А вот для изменения высоты ячеек в HTML у тегов <TD> и <TH> все-таки был атрибут height (вот и пойми этих разработчиков), но он устарел, поэтому снова стили.

Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока <TABLE> не указана — браузеры проигнорируют значения для ячеек.

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

В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки.

Пример изменения высоты HTML-таблиц и ячеек

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Ширина HTML-таблицы м ячеек</title> </head> <body> <table style="height:100px" border="2"> <tr><th style="height:40%">Ячейка 1.1</th><th>Ячейка 1.2</th></tr> <tr><td style="height:60%">Ячейка 2.1</td><td>Ячейка 2.2</td></tr> </table> </body> </html>

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

Выравнивание в HTML-таблицах

Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (<TD>) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных (<TH>) — в обоих случаях по центру.

Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign, которые указываются в тегах <TR> для рядов (строк) или <TD> и <TH> для отдельных ячеек:

Горизонтальное выравнивание:

Вертикальное выравнивание:

Пример выравнивания в HTML-таблицах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Выравнивание в таблице HTML</title> </head> <body>  <table style="height:110px" width="80%" border="2">  <tr align="right" valign="top">  <td style="height:50px">Ячейка 1.1</td>  <td>Ячейка 1.2</td>  </tr>  <tr>  <td valign="top" style="height:60px">Ячейка 2.1</td>  <td>Ячейка 2.2</td>  </tr>  </table> </body> </html>

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

seodon.ru

Даже если ячейка содержит только изображение, вы должны знать, что ячейки таблицы имеют высоту, вычисленную в соответствии с позицией базовой линии текста; и текущий стиль текста влияет на вычисление этой базовой позиции и интервал между строками после него. Вы можете подумать, что установка «line-height: 1» будет достаточной, чтобы избежать этого интервала между линиями, то есть разницы в марже, которая всегда встречается ниже каждой строки текста. Этого недостаточно. Самое простое решение — установить « линия-высота: 0,8» (или ниже) для ячейки, содержащей изображение, так что добавленный по умолчанию 0.2% -ный промежуток ниже базовой линии (который по-прежнему считается дефолтом по умолчанию к отсутствию текста) сделает базовую линию подходящей по высоте ячейки. Затем вы можете правильно поместить изображение (или любой элемент фиксированной высоты) в ячейку, высота которой определит высоту ячейки, без увеличения высоты ячейки.

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

Протестировано в Google Chrome (текущая версия 15)

Пример (HTML5):

<!DOCTYPE html> <html><head>  <title>Examples of image transforms (rotations and mirroring)</title>  <style>  table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;}  td.z{line-height:0;}  </style> </head><body>  <table border="0" cellspacing="0" cellpadding="0">  <tbody><tr>  <td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td>  <td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td>  <td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td>  <td style="border-bottom:hidden">Normal &minus;90° (0,1,-1,0,0,0)</td>  </tr><tr>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>  </tr><tr>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>  <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td>  </tr><tr>  <td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td>  <td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td>  <td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td>  <td style="border-top:hidden">Mirrored &minus;90° (0,-1,-1,0,0,0)</td>  </tr></tbody>  </table> </body></html> 

Обратите внимание на трюк в классе «z» для ячеек таблицы (line-height: 0), содержащий только изображение, чтобы они точно соответствовали размеру изображения. Изображения, показанные в этом примере, представляют собой маленькую квадратную фотографию в 8 разных ориентациях. Там только тонкая 1px серая граница, охватывающая каждую фотографию, и ее ярлык, показанный выше или ниже, фотографии точно соответствуют границам ячеек.

Обратите внимание, что переориентация использует стили WebKit (для Safari и Chrome); вы можете добавить эквивалентные свойства для IE и Firefox, изменив префикс; для CSS3 не требуется префикс. Если эти преобразования не поддерживаются, изображения не будут переориентированы/зеркалированы, но они по-прежнему будут точно соответствовать ячейке без дополнительных внутренних зазоров.

qaru.site

Фиксированный размер ячеек через CSS

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном размере, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td width=»123px»>). С помощью CSS все это можно сделать гораздо легче.

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

<table>  <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>  <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>  <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>  </table>

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

table {  	table-layout:fixed; width:450px;  }  table td {  	overflow:hidden;  }  table td:nth-of-type(1) {  	width:200px;  }  table td:nth-of-type(2) {  	width:75px;  }  table td:nth-of-type(3) {  	width:175px;  }

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

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

<table class="music">  <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>  <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>  <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>  </table>

То и CSS код должен быть следующим:

table.music {  	table-layout:fixed; width:450px;  }  table.music td {  	overflow:hidden;  }  table.music td:nth-of-type(1) {  	width:200px;  }  table.music td:nth-of-type(2) {  	width:75px;  }  table.music td:nth-of-type(3) {  	width:175px;  }

И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {  	table-layout:fixed; width:450px;  }  table.music td,  table.music th {  	overflow:hidden;  }  table.music td:nth-of-type(1),  table.music th:nth-of-type(1) {  	width:200px;  }  table.music td:nth-of-type(2),  table.music th:nth-of-type(2) {  	width:75px;  }  table.music td:nth-of-type(3),  table.music th:nth-of-type(3) {  	width:175px;  }

sysadmin.ru

HTML ширина ячейки таблицы и ее высота (размер ячеек)

HTML высота ячеек и их ширина, размер определяется следующими атрибутами:

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td width="200" height="100">ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

Результат:

ячейка 1, первый ряд ячейка 2, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td align="left">ячейка 1</td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
</tr>
</table>
</body>
</html>

Результат:

ячейка 1 ячейка 2 ячейка 3

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td valign="top">ячейка 1</td>
<td valign="bottom">ячейка 2</td>
<td valign="middle">ячейка 3</td>
</tr>
</table>
</body>
</html>

Результат:

ячейка 1 ячейка 2 ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
</body>
</html>

Результат:

Заголовок Заголовок Заголовок
Текст Текст Текст
Текст Текст Текст

Теги <th> </th> определяют заголовок HTML таблицы.

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align="center" width="220" bgcolor="#006699">
<tr height="220">
<td>
<p>align="center"</p>
</td>
</tr>
</table>
   <table align="left" width="220" height="220" bgcolor="#cc0000">
   <tr>
   <td>
   <p>align="left"</p>
   </td>
   </tr>
   </table>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица РїРѕ центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolorHTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color.

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="150" height="100"> &nbsp; </td>
<td width="150" align="center">
    <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица внутри ячейки РґСЂСѓРіРѕР№ таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

ab-w.net

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

 

<table style="height:значение">…</table> — указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют.

 

А вот для изменения высоты ячеек в HTML у тегов <TD> и <TH> все-таки был атрибут height (вот и пойми этих разработчиков), но он устарел, поэтому снова стили.

 

<th style="height:значение">…</th>

<td style="height:значение">…</td>

 

Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока <TABLE> не указана — браузеры проигнорируют значения для ячеек.

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

В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки.

 

Пример изменения высоты HTML-таблиц и ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Ширина HTML-таблицымячеек</title>

</head>

<body>

<table style="height:100px" border="2">

<tr><th style="height:40%">Ячейка 1.1</th><th>Ячейка 1.2</th></tr>

<tr><td style="height:60%">Ячейка 2.1</td><td>Ячейка 2.2</td></tr>

</table>

</body>

</html>

 

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

Html высота ячейки таблицы

Выравнивание в HTML-таблицах

Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (<TD>) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных (<TH>) — в обоих случаях по центру.

Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign, которые указываются в тегах <TR> для рядов (строк) или <TD> и <TH> для отдельных ячеек:

 

Горизонтальное выравнивание:

align="left" — Выравнивание по левой стороне ячейки.

align="center" — По центру.

align="right" — По правой стороне.

 

Вертикальное выравнивание:

valign="top" — Выравнивание по верхней стороне ячейки.

valign="middle" — По центру.

valign="bottom" — По нижней стороне.

 

Пример выравнивания в HTML-таблицах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Выравнивание в таблице HTML</title>

</head>

<body>

<table style="height:110px" width="80%" border="2">

<tr align="right" valign="top">

<td style="height:50px">Ячейка 1.1</td>

<td>Ячейка 1.2</td>

</tr>

<tr>

<td valign="top" style="height:60px">Ячейка 2.1</td>

<td>Ячейка 2.2</td>

</tr>

</table>

</body>

</html>

 

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

Html высота ячейки таблицы

Фон HTML-таблиц

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

 

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

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

Html высота ячейки таблицы

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

<table border="число">…</table>

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге <TABLE> применяется атрибут cellspacing. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

 

<table cellspacing="число">…</table>

Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге <TABLE> использовать атрибут cellpadding. И его значения это числа, означающие пиксельные размеры.

 

<table cellpadding="число">…</table>

 

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

 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Границы, рамки и отступы таблиц</title>

</head>

<body>

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

<table border="5" cellspacing="10" cellpadding="15">

<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>

<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>

<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>

</table>

 

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

<table border="5">

<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>

<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>

<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>

</table>

 

</body>

</html>

 

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

 

Html высота ячейки таблицы

 

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

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

 

helpiks.org

Ширина таблицы задается атрибутом width элемента TABLE. Значение можно задавать как в абсолютных единицах (width=»2 5 0″), так и в относительных (width=»80 %»). Например, задав значение ширины в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. Если же ширина задается в процентах, то они высчитываются от ширины окна браузера или от ширины ячейки другой таблицы, в которую вставлена данная. То же самое можно делать и с высотой таблицы с помощью атрибута height.

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

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

На рис. 3.9 и 3.10 изображены две таблицы одинакового содержания, но разной ширины и высоты.

Рис. 3.9. Ширина таблицы равна 80 % от ширины окна браузера

Рис. 3.10. Ширина и высота таблицы равна 300 пикселам

Ширина первой таблицы равна 80 % от размера окна браузера, а первый столбец этой таблицы занимает 50 % от всей ширины таблицы. Высота первой строки равна 100 пикселам.

Вторая таблица квадратная, ширина стороны равна 300 пикселам. В листингах 3.4 и 3.5 приведены коды страниц, содержащих описанные таблицы.

Листинг 3.4. Код таблицы шириной 80 % от ширины окна браузера

<html>

<head>

<title>Простая HTML-таблица</title>

</head>

<body>

<table border=»4″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″ width=»80%»>

<caption>Ширина таблицы 80%</caption>

<tr><th height=»100″ width=»50%»>Заголовок 1</th>

<th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2×1 </td><td>Ячейка 2×2 </td><td>Ячейка 2×3 </td></tr>

<tr><td>Ячейка 3×1 </td><td>Ячейка 3×2 </td><td>Ячейка 3×3 </td></tr>

</table>

</body>

</html>

Листинг 3.5. Код таблицы шириной 300 пикселов

<html>

<head>

<title>Простая HTML-таблица</title>

</head>

<body>

<table border=»4″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″ width=»300″ height=»300″>

<caption>Ширина таблицы 300 пикселов</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2×1 </td><td>Ячейка 2×2 </td><td>Ячейка 2×3 </td></tr>

<tr><td>Ячейка 3×1 </td><td>Ячейка 3×2 </td><td>Ячейка 3×3 </td></tr>

</table>

</body>

</html>

Следующая глава >

it.wikireading.ru

Форматирование таблиц

  • Содержание:
  • 1. Границы таблицы border
  • 2. Как задать ширину и высоту таблицы
  • 3. Как задать фон таблицы
  • 4. Столбцы таблицы
  • 5. Как добавить таблице заголовок
  • 6. Как убрать промежуток между рамками ячеек
  • 7. Как увеличить промежуток между рамками ячеек
  • 8. Как скрыть пустые ячейки таблицы
  • 9. Компоновка макета таблицы с помощью свойства table-layout
  • 10. Лучшие макеты таблиц (Топ-10 таблиц)

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

table {  border-collapse: collapse; /*убираем пустые промежутки между ячейками*/  border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/  }

Границы ячеек заголовка каждого столбца задаются для элемента th:

th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

td {border: 1px solid grey;}

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

th, td {border: 1px solid grey;}

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

table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */  table {border-top: 3px solid grey; }  /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */  td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

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

Ширина таблицы и столбцов задаётся с помощью свойства width. Если для таблицы задано table {width: 100%;}, то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или %, например:

table {width: 600px;}  th {width: 20%;}  td:first-child {width: 30%;}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов <td> и <th>. Фиксировать высоту с помощью свойства height не рекомендуется.

th, td {padding: 10px 15px;}

3. Как задать фон таблицы

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

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега <tr>. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

с помощью тега <col> можно задать фон для любого количества столбцов;

с помощью селектора table td:first-child, table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про тег <col> вы можете прочитать здесь.

Подробнее про CSS-селекторы вы сможете прочитать здесь.

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега <caption>, а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align. Наследуется.

caption-side
Значения:
top Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom Располагает заголовок под таблицей.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
<table>   <caption>Таблица № 1</caption>   <tr>   <th>Company</th>   <th>Q1</th>   <th>Q2</th>   <th>Q3</th>   <th>Q4</th>   </tr>  ...  </table>
caption {  caption-side: bottom;  text-align: right;  padding: 10px 0;   font-size: 14px;  }
caption_side
Рис. 2. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse, то промежуток уберётся. Свойство наследуется.

border-collapse
Значения:
separate Рамки ячеек располагаются раздельно.
collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {border-collapse: collapse;}
table_border_collapse
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

border-spacing
Значения:
<длина> <длина> Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {border-collapse: separate; border-spacing: 10px 20px;}  table {border-collapse: separate; border-spacing: 10px;}
table_border_spacing
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;}, то ячейка не будет скрыта. Наследуется.

empty-cells
Значения:
show Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
<table>  <tr>   <th>Company</th>   <th>Q1</th>   <th>Q2</th>   <th>Q3</th>   </tr>  <tr>   <td>Microsoft</td>   <td>20.3</td>   <td>30.5</td>   <td></td>  </tr>  <tr>   <td>Google</td>   <td>50.2</td>   <td>40.63</td>   <td>45.23</td>  </tr>  </table>
table {  border: 1px solid #69c;  border-collapse: separate;  empty-cells: hide;  }  th, td {border: 2px solid #69c;}
table_empty
Рис. 5. Пример скрытия пустой ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

table-layout
Значения:
auto Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left, padding-right, border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины.
fixed Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {table-layout: fixed;}

10. Лучшие макеты таблиц

(По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine)

top-table

Перейти на страницу с примерами

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th.
top-table1

<table>  <tr><th>Employee</th><th>Salary</th><th>Bonus</th><th>Supervisor</th></tr>  <tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>  <tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>  <tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>  <tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>  </table>
table {   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;   font-size: 14px;   background: white;   max-width: 70%;   width: 70%;   border-collapse: collapse;   text-align: left;  }  th {   font-weight: normal;   color: #039;   border-bottom: 2px solid #6678b1;   padding: 10px 8px;  }  td {   color: #669;   padding: 9px 8px;   transition: .3s linear;  }  tr:hover td {color: #6699ff;}

При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td.
top-table2

td {   border-bottom: 1px solid #ccc;   color: #669;   padding: 9px 8px;   transition: .3s linear;  }/*остальной код - как в примере выше*/

Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
top-table3

th {   font-weight: normal;   color: #039;   padding: 10px 15px;  }  td {   color: #669;   border-top: 1px solid #e8edff;   padding: 10px 15px;  }  tr:hover td {background: #e8edff;}

2. Вертикальный минимализм

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

th {   font-weight: normal;   border-bottom: 2px solid #6678b1;   border-right: 30px solid #fff;   border-left: 30px solid #fff;   color: #039;   padding: 8px 2px;  }  td {   border-right: 30px solid #fff;   border-left: 30px solid #fff;   color: #669;   padding: 12px 2px;  }

3. «Коробочный» стиль

Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
top-table5

th {   font-size: 13px;   font-weight: normal;   background: #b9c9fe;   border-top: 4px solid #aabcfe;   border-bottom: 1px solid #fff;   color: #039;   padding: 8px;  }  td {   background: #e8edff;   border-bottom: 1px solid #fff;   color: #669;   border-top: 1px solid transparent;   padding: 8px;  }  tr:hover td {background: #ccddff;}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
top-table6

table {   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;   font-size: 14px;   max-width: 70%;   width: 70%;   text-align: center;   border-collapse: collapse;   border-top: 7px solid #9baff1;   border-bottom: 7px solid #9baff1;  }  th {   font-size: 13px;   font-weight: normal;   background: #e8edff;   border-right: 1px solid #9baff1;   border-left: 1px solid #9baff1;   color: #039;   padding: 8px;  }  td {   background: #e8edff;   border-right: 1px solid #aabcfe;   border-left: 1px solid #aabcfe;   color: #669;   padding: 8px;  }

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
top-table7

th {   font-weight: normal;   color: #039;   padding: 10px 15px;  }  td {   color: #669;   border-top: 1px solid #e8edff;   padding: 10px 15px;  }  tr:nth-child(2n) {background: #e8edff;}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект :hover при наведении на строку.
top-table8

table {border: 1px solid #69c;}  th {   font-weight: normal;   color: #039;   border-bottom: 1px dashed #69c;   padding: 12px 17px;  }  td {   color: #669;   padding: 7px 17px;  }  tr:hover td {background: #ccddff;}

top-table9

table {border: 1px solid #69c;}  th {   font-weight: normal;   color: #039;   padding: 10px;  }  td {   color: #669;   border-top: 1px dashed #fff;   padding: 10px;   background:#ccddff;  }  tr:hover td {background: #99bcff;}

top-table10

table {border: 1px solid #6cf;}  th {   font-weight: normal;   font-size: 13px;   color: #039;   text-transform: uppercase;   border-right: 1px solid #0865c2;   border-top: 1px solid #0865c2;   border-left: 1px solid #0865c2;   border-bottom: 1px solid #fff;   padding: 20px;  }  td {   color: #669;   border-right: 1px dashed #6cf;   padding: 10px 20px;  }

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector