Продолжаем создавать сайт в блокноте. На прошлом уроке мы начали верстать главную страницу сайта. Для верстки страницы, в качестве основы, мы выбрали таблицу.
В наш 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 −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 −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> |
Результат:
| ячейка 1, первый ряд | ячейка 2, первый ряд |
| ячейка 1, второй ряд | ячейка 2, второй ряд |
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:
<html> |
Результат:
| ячейка 1 | ячейка 2 | ячейка 3 |
Вертикальное выравнивание текста внутри HTML таблицы
HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:
<html> |
Результат:
| ячейка 1 | ячейка 2 | ячейка 3 |
Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.
Теги, определяющие заголовок HTML таблицы
HTML заголовки таблицы:
<html> |
Результат:
| Заголовок | Заголовок | Заголовок |
|---|---|---|
| Текст | Текст | Текст |
| Текст | Текст | Текст |
Теги <th> </th> определяют заголовок HTML таблицы.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы внутри web-страницы:
<html> |
Результат: HTML таблица РїРѕ центру страницы, слева, справа
В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color.
HTML таблица расположена внутри ячейки
Пример:
<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-таблицах
Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (<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 у тегов таблиц был специальный атрибут bgcolor, который изменял цвет фона всей таблицы или ее части. А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут — background. Браузеры и до сих пор его понимают.
Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки. Но и это еще не все, используя специальные атрибуты тега <TABLE> можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.
Рамка 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, браузеры прибавляют значения 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; }
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse, то промежуток уберётся. Свойство наследуется.
| border-collapse | |
|---|---|
| Значения: | |
| separate | Рамки ячеек располагаются раздельно. |
| collapse | Рамки ячеек сливаются в одну, а промежутки между рамками убираются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
table {border-collapse: collapse;}
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
| border-spacing | |
|---|---|
| Значения: | |
| <длина> <длина> | Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;}
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;}
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
