Столбцы в html – HTML (, ). html.

Ширина столбца html

Ширина столбца будем её выставлять нескольким способами. Ширина столбца в самой таблице, ширина столбца в процентах и пикселях, + ширина столбца через css.

Напоминаю, что ширина обозначается английским словом:

Если мы помним, из предыдущих тем, то ширина таблицы измеряется в 1. %, 2.пикселях(px)! Эти свойства наследуют столбцы!

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

Давайте поэкспериментируем! С процентами!

Создадим таблицу с тремя столбцами!

И присвоим им ширину 25% + 50% + 25% сумма должна быть равна 100%.

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

код:

    <tr>

        <td>width=»25%»</td>

        <td>width=»50%»</td>

        <td>width=»25%»</td>

    </tr>

Результат:

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

Общая ширина текстового поля, где вы читаете данный текст не равна 600 пикселям.

Делим на 3 части 150px + 300px + 150px

код:

<table border_around=»1″>
    <tr>
        <td>width=»150″</td>
        <td>width=»300″</td>
        <td>width=»150″</td>
    </tr>
</table>

Смотрим наши получившиеся столбцы с разной шириной:

Теперь ширину столбца пропишем через css.

Ширина столбца через css

Сам столбец обозначается тегом «td»:

<td> Содержание столбца.</td>

Есть несколько вариантов, как прописать ширину столбцов.

К примеру, если вы пропишите сам столбец и к нему прикрепите ширину.

Вот так:

Но у этого способа есть один самый главный минус — все столбцы на странице будут иметь эту ширину!

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

Обратите внимание, что на третьем столбце ширина не прописана — вопрос — какой ширины должен быть третий столбец!?

 <style>.example{ width: 100%; }

.example td.first{ width: 25%; }

.example td.second{ width: 50%; }</style>

Код:

<table>
    <tr>
        <td>class=»first»</td>
        <td>class=»second»</td>
        <td>no class</td>
    </tr>
</table>

Результат:

dwweb.ru

Как объединить ячейки в HTML-таблице горизонтально и вертикально: colspan и rowspan

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

В HTML-таблице каждая ячейка ограничивается набором тегов <td> и </td>, между которыми размещается содержимое. Если вы не добавляете в тег <td> дополнительные атрибуты или стили CSS, то каждая ячейка по умолчанию будет занимать ровно один столбец.

Для HTML объединения ячеек необходимо добавить в строку меньше ячеек, чем в остальные строки и добавить атрибут colspan=» « внутри тега <td> ячейки, которую необходимо растянуть.

Рассмотрим простой пример HTML-таблицы с двумя строками и двумя столбцами (четыре ячейки). Ее HTML-код выглядит следующим образом:

<table>
<tr><td>содержимое</td><td>содержимое</td></tr>
<tr><td>содержимое</td><td>содержимое</td></tr>
</table>

Далее, если нужно объединить две ячейки в верхней строке, используйте атрибут <b>colspan=» «</b> следующим образом:

<table>
<tr><td colspan="2">содержимое</td></tr>
<tr><td> содержимое</td><td>содержимое</td></tr>
</table>

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

Можно осуществить объединение ячеек таблицы HTML в любой ее области с любым количеством столбцов. Одним из наиболее полезных применений объединения ячеек по горизонтали является создание заголовков таблицы. Если таблица имеет n столбцов, поместите атрибут colspan=»n» в первую ячейку верхнего ряда и удалите другие ячейки из этого ряда.

Атрибут rowspan=» » позволяет объединять ячейки по вертикали

Если нужно, чтобы ячейка охватывала несколько строк, следует добавить атрибут rowspan=» « внутри тега <td> той ячейки, которую необходимо растянуть по вертикали. В каждой строке под строкой, где начинается растянутая ячейка, нужно удалить одну ячейку, чтобы таблица была выровнена. Например, когда вы растягиваете ячейку на три строки, необходимо удалить по одной ячейке в следующих двух строках.

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

<table>
<tr><td>содержимое</td><td>содержимое</td></tr>
<tr><td>содержимое</td><td>содержимое</td></tr>
</table>

Чтобы осуществить HTML table объединение ячеек по вертикали, добавьте для первой ячейки верхней строки атрибут rowspan=»2″, а затем удалите одну из ячеек в нижнем ряду. HTML-код теперь будет выглядеть следующим образом:

<table>
<tr><td rowspan="2">stuff</td><td>содержимое</td></tr>
<tr><td>содержимое</td></tr>
</table>

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

Способы комбинирования rowspan и colspan для создания пользовательских HTML-таблиц с ячейками, которые охватывают несколько строк и столбцов

Код:

<table>
<tr>
<td rowspan="3">span 3 rows</td>
<td colspan="3">span 3 columns</td>
</tr>
<tr>
<td>H</td>
<td>T</td>
<td rowspan="2">span 2 rows</td>
</tr>
<tr>
<td>M</td>
<td>L</td>
</tr>
<tr>
<td colspan="4">span 4 columns</td>
</tr>
</table>

<table>
<tr>
<td rowspan="2" colspan="2">span 2 rows and 2 columns</td>
<td>T</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>E</td>
<td>L</td>
<td>B</td>
</tr>
</table>

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

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

Перевод статей «How to Combine Cells Horizontally in an HTML Table Colspan», «How to Combine Cells Vertically in an HTML Table: Rowspan» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

html количество столбцов в таблице — html

Я пытаюсь создать следующую таблицу html:

Я не могу понять, почему моя текущая реализация не дает желаемого результата. Как вы можете видеть в фрагменте, последний <td> во втором <tr> охватывает 2 столбца, а не средний <td>.

table{
	width: 100%;
}
table tr td[colspan="4"]{
	font-size: 16px;
	text-align:center;
	background-color: #008CD1;
	color: #fff;
} 

<table>
  <tbody>
    <tr>
      <td colspan="4"><b>Nonverbal skills</b></td>
    </tr>
    <tr>
      <td>energised</td>
      <td colspan="2">Gestures</td>
      <td>Under energised</td>
    </tr>
  </tbody>
</table>

При исследовании я нашел следующее: https://www.w3.org/TR/WD-html40-970917/struct/tables.html

Существует несколько способов определения количества столбцов:

Подсчитайте количество столбцов, заданных элементами COL и COLGROUP, которые могут встречаться только в начале таблицы (после дополнительного CAPTION).

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

[устарело] Используйте атрибут cols для элемента TABLE. Это самый слабый метод, поскольку он не предоставляет дополнительной информации о ширине столбцов. Однако это может не иметь значения, если автор использует таблицы стилей для указания ширины.

Итак, что я неправильно понял об этой функциональности?

Также обратите внимание, что я знаю, что я могу использовать css для установки ширины <td> Я хочу знать, почему моя текущая реализация не работает.

qaru.site

TD width: настройка ширины столбца таблицы

Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах.

Настройка ширины столбца таблицы

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

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that we might even need a line break.</td>   </tr> </table>

Как видите, в первом случае мы не применили CSS или HTML td width. Что браузер сделает с такой таблицей?

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

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that we might even need a line break.</td>   </tr> </table>

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

Довольно неплохо. К сожалению, это некорректный HTML- код, поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS:

<style> .equal-width td {   width: 50%; } </style> <table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width:

Регулируемая высота строки таблицы

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

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Как браузер выводит этот пример:

Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS:

<style> .tall-row td {   height: 200px; } </style> <table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Браузер должен отобразить этот код практически идентично предыдущему. Давайте посмотрим, так ли это:

Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width. Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента <td> и позволить браузеру автоматически устанавливать высоту строки, основываясь на этой информации. Вот как можно применить эту стратегию:

<style> .tall-row td {   padding: 80px 10px; } </style> <table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Этот код CSS добавляет отступы в 80 пикселей до и после, и 10 пикселей влево и вправо от каждого элемента <td>. Вот результат:

Данная публикация представляет собой перевод статьи «<td width>» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

seodon.ru | Учебник HTML — Таблицы

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет — лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше — танк или самолет — пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.

Создание таблиц в 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.

<table>…</table> — Таблица располагается слева. Это значение по умолчанию.

<table>…</table> — Расположение таблицы справа.

<table>…</table> — HTML-таблица по центру.

Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке:. Ну, что такое ноль, я думаю, вы понимаете, а вот «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>
  <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, общий синтаксис такой:

<table>…</table> — любое неотрицательное число указывающее ширину в пикселях.

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

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

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

<th>…</th>

<td>…</td>

В качестве значений для ширины ячеек лучше тоже использовать только пиксели (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 border="2">
  <tr><th>Ячейка 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) такая возможность есть, поэтому их и будем использовать.

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

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

<th>…</th>

<td>…</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 border="2">
  <tr><th>Ячейка 1.1</th><th>Ячейка 1.2</th></tr>
  <tr><td>Ячейка 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 border="2">
  <tr align="right" valign="top">
   <td>Ячейка 1.1</td>
   <td>Ячейка 1.2</td>
  </tr>
  <tr>
   <td valign="top">Ячейка 2.1</td>
   <td>Ячейка 2.2</td>
  </tr>
 </table>
</body>
</html>

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

Фон HTML-таблиц

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

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

Домашнее задание.

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

1. Измените фон страницы и размер шрифта.
2. В начале страницы создайте четыре ссылки-изображения.
3. Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки.
4. Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения.
5. Под таблицей создайте текстовые ссылки.
6. Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка.
7. Не забывайте про Комментарии в HTML, они серьезно помогают при работе.

Посмотреть результат → Посмотреть ответ

seodon.ru

Тег | htmlbook.ru

Спецификация

Описание

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

Синтаксис

<table>
  <col атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>

<table>
  <col атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align

Устанавливает выравнивание содержимого колонки по краю.

char

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

charoff

Сдвигает содержимое ячейки относительно заданного символа.

span

Количество колонок, к которым следует применять параметры.

valign

Задает вертикальное выравнивание содержимого колонки.

width

Ширина колонок.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COL</title>
 </head>
 <body>

  <table border="0" cellpadding="5" cellspacing="0">
   <col valign="top">
   <col valign="top">
   <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer 
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
     ea commodo consequat.
    </td>
    <td>Lorem ipsum dolor sit amet, consectetuer 
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
     ea commodo consequat. 
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1. В браузерах Firefox, Safari и Chrome текст по верхнему краю ячейки выравниваться не будет (рис. 2).

Рис. 1. Вид колонок в браузере Opera

Рис. 2. Вид колонок в браузере Safari

htmlbook.ru

Объединение ячеек | htmlbook.ru

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Пример 12.3. Неверное объединение ячеек

<!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=utf-8">
   <title>Неправильное использование colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

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

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере  12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

<!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=utf-8">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

htmlbook.ru