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

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

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

Тег <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. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». 🙂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример выравнивания в 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 С‚Р°Р±Р»РёС†Р° РїРѕ С†РµРЅС‚СЂСѓ СЃС‚СЂР°РЅРёС†С‹, СЃР»РµРІР°, СЃРїСЂР°РІР°

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его 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

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

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

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

<html>

<head>

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

</head>

<body>

<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-таблицах

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

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>

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

</head>

<body>

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

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

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

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

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

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

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

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

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

<html>

<head>

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

</head>

<body>

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

<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>

<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, браузеры прибавляют значения 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>

<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>

<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)

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

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

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

<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.

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

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

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. Вертикальный минимализм

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

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. «Коробочный» стиль

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

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;}

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

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. Горизонтальная зебра

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

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 при наведении на строку.

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;}

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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

About the Author: admind

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучшие статьи читаем:

You May Also Like

Цвета для сайта html

Теги цветов html

About the Author: admind

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