Html толщина таблицы – Задаём размеры отдельных ячеек и столбцов — Знакомство с таблицами — HTML Academy — Вебджем.рф

Содержание

Объемная таблица | htmlbook.ru

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

Толщина трехмерной рамки регулируется атрибутом border тега <table>, при этом меняется только внешняя граница вокруг таблицы. Толщина линий внутри таблицы остается неизменной (рис. 1).

Рис. 1. Таблица с трехмерной рамкой

Для создания указанной таблицы вынесем все возможные параметры в стили, а добавление рамки возложим на атрибут border (пример 1).

Пример 1. Использование атрибута border

<!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>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
   }
   TH {
    background: #4b0082; /* Цвет фона */
    color: #fffff0; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячеек */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" border="2">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

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

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
Стиль рамки	Толщина рамки
Стиль рамки	2 пиксела	4 пиксела	6 пикселов
groove (углубленная)
ridge (бортик)
inset (вдавленная)
outset (выдавленная)

В примере 2 для добавления рамки используется стиль со значением groove и толщиной 5 пикселов. Вид полученной таблицы показан на рис. 2.

Рис. 2. Разделение ячеек таблицы

Стилевое свойство border применяется к селектору TABLE для создания рамки вокруг таблицы и к селекторам TD и TH для добавления рамки к каждой ячейки. При этом чтобы не возникало двойных линий в местах соприкосновения разных ячеек, используется свойство border-collapse со значением collapse (пример 2).

Пример 2. Создание рамки с помощью стилей

<!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>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    border: 5px groove #ccc; /* Рамка вокруг таблицы */
   }
   TH {
    background: #4b0082; /* Цвет фона */
    color: #fffff0; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячеек */
    border: 5px groove #ccc /* Граница между ячейками */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

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

Рис. 3. Таблица с «выдавленными» строками

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

Для создания приведенной на рис. 3 таблицы введем дополнительный класс с именем even, и будем добавлять его к четным строкам таблицы. При этом для селектора TR нельзя напрямую установить свойство border, линия в этом случае отображаться просто не будет. Поэтому воспользуемся контекстными селекторами и добавим конструкцию .even TD, которая говорит, что для всех ячеек расположенных внутри элемента с классом even задаем линию снизу и сверху. Цвет фона с помощью свойства background допускается применять к селектору TR, что и показано в примере 3.

Пример 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>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 227px; /* Ширина таблицы */
    background: #ccc; /* Цвет фона нечетных строк */
    border: 1px solid #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого */
    text-align: left; /* Выравнивание по левому краю */
   }
   TR.even {
    background: #e0e0e0; /* Цвет фона четных строк*/
   }
   .even TD {
    border-top: 2px solid #666; /* Темная линия сверху ячейки */
    border-bottom: 1px solid #fff; /* Светлая линия снизу ячейки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

Таблица html

Таблица html ,теги таблицы, столбцы таблицы, строки таблицы – это сегодня будем разбирать!

И конечно же будет множество примеров таблиц тех или иных видов и разновидностей…

Теги таблицы html

Начнем с тегов таблицы — таблица в html обознается двойным тегом «table»

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

Как обозначаются строки в таблице html

Строка в таблице обозначается двойным тегом «tr»

И вспомнил, что ведь есть еще внутри двойной тег «tbody» — который я позабыл, как уже вставлял в таблицу, но он существует и его нужно использовать по правилам, но если вы , как я забудете его использовать, то браузер допишет этот тег самостоятельно…

В каждой строке

Ну что — вот так она должна выглядеть таблица по всем правилам…

<table>

<tbody>

<tr><td>Строка 1 </td></tr>

<tr><td>Строка 2 </td></tr>

<tr><td>Строка 3 </td></tr>

</tbody>

</table>

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

Строка 1

Строка 2

Строка 3

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

Либо создаем css файл и добаляем выделенный код без первой и последней строки, либо добавляем весь код на странице до тега

table td {

border: 1px solid black;

}

Строка 1

Строка 2

Строка 3

Теперь добавим еще одни столбец, надо в теге tr — продублировать теги td:

<tbody>

<tr>

<td>Строка 1 — первого столбца</td>

<td>Строка 1 — второго столбца</td>

</tr>

<tr>

<td>Строка 2 </td>

</tr>

<tr>

<td>Строка 3 </td>

</tr>

</tbody>

Вот в итоге у нас получилась таблица, с двумя столбцами и тремя строками…:

Строка 1 — первого столбца	Строка 1 — второго столбца
Строка 2	Строка 2
Строка 3	Строка 3

Ширина таблицы html

Ширина может задаваться несколькими способами…

1. Внутри тега table прописываем ширину:

Строка 1 +

Строка 2

Строка 3

2. На самой странице до тега

table td {

border: 1px solid black;

width: 400px;

}

3. В файле css без первой и последней строки предыдущего выделенного кода.

Ширина таблицы html в процентах

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

Для примера давайте возьмем 70%

table td {

border: 1px solid black;

width: 70%;

}

Строка 1 +

Строка 2

Строка 3

Или пример с двумя столбцами — вся ширина таблицы — возьмем 100%, а столбцы разделим на 70% + 30% — если вы помещаете в таблицу, то будет вид такой…

<tr>

<td>Строка 1 — первого столбца + width=»70%»</td>

<td>Строка 1 — второго столбца +</td>

</tr>

<tr>

<td>Строка 2 </td>

</tr>

<tr>

<td>Строка 3 </td>

</tr>

Результат:

Строка 1 — первого столбца +	Строка 1 — второго столбца +
Строка 2	Строка 2
Строка 3	Строка 3

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

Если вы собираетесь использовать только файл css, либо стили на странице, то в стилях достаточно прописать и присвоить каждому td свой класс и свою ширину…

table{

border: 1px solid black;

width: 100%;

}

table td.first{

width: 70%;

}

table td.second{

width: 70%;

}

Код:

<tr>

<td class=first «>Строка 1 — первого столбца + стиль=»70%»</td>

<td class=second»>Строка 1 — второго столбца + стиль=»30%»</td>

</tr>

Результат будет аналогичный предыдущему способу…

Высота строки таблицы html

Кроме высоты — можно задать высоту строки таблицы…

<tr>

<td>Строка 1 — первого столбца + width=»70%»</td>

<td>Строка 1 — второго столбца +</td>

</tr>

<tr>

<td >Строка 2 +</td>

<td>Строка 2 </td></tr>

<tr>

<td >Строка 3 + </td>

<td>Строка 3 </td>

</tr>

Результат:

Строка 1 — первого столбца +	Строка 1 — второго столбца +
Строка 2 +	Строка 2
Строка 3 +	Строка 3

Вас может еще заинтересовать список тем : HTML , CSS , TABLE , Теги:
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html

Особенности таблиц | htmlbook.ru

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

Вложенные таблицы

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

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

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

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

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

Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2.1).

Пример 2.1. Использование table-layout

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
   TD.dino { width: 200px; }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td><img src="images/dino.gif" 
      alt="Динозаврик" /></td>
    <td>...</td>
   </tr>
  </table>
 </body>
</html>

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

а. Вид таблицы в IE6, IE7, Firefox 2

б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

Рис. 2.1. Использование table-layout

Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden. При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.

TABLE {
  table-layout: fixed; /* Ячейки фиксированной ширины */
}
TD.dino {
  width: 200px;
  overflow: hidden;
}

Высота ячеек

Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.

Пример 2.2. Колонки одной высоты

XHTML 1.0CSS 2.1IE 9CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Высота ячеек</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD { 
    padding: 10px; /* Поля в ячейках */ 
   }
   TD.content {
    background: #f0f0f0; /* Цвет фона левой колонки */
   }
   TD.menu {
    width: 120px; /* Ширина правой колонки*/
    background: #9c3022; /* Цвет фона правой колонки */
    color: #fff; /* Цвет текста */
    vertical-align: top;
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <p>Мясо отварить до готовности. Промыть свеклу, очистить, 
     нарезать соломкой и тушить с помидорами до полуготовности.</p>
     <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить 
     нарезанный дольками картофель, довести до кипения, опустить нарезанную 
     соломкой свежую капусту и варить 10-15 минут, добавить пассерованные 
     овощи, болгарский перец, нашинкованный тонкой соломкой, 
     специи и довести до готовности.</p>
     <p>Готовому борщу дать настояться в течение 20-25 минут. 
     При подаче к столу добавить сметану, мясо, зелень.</p>
    </td>
    <td>Борщ</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 2.2. Макет, созданный с использованием таблицы

В данном примере в ячейках разное содержание, но высота ячеек одинакова.

Порядок ячеек

Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо и сверху вниз (рис. 2.3).

Рис. 2.3. Порядок создания ячеек

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

Загрузка таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 Кб). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы. В обычной таблице браузер анализирует все ячейки и затем уже изменяет ширину колонок на основе этой информации. Включение table-layout со значением fixed меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.

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>

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

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

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

Тег <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>

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

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

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

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

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

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

Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого 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 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>

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

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

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

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

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

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

А вот для изменения высоты ячеек в 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 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>

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

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Выравнивание в 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>

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

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Фон HTML-таблиц

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

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

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

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

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

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

3.5. Ширина и высота таблицы и ячеек. HTML, XHTML и CSS на 100%

3.5. Ширина и высота таблицы и ячеек

Ширина таблицы задается атрибутом 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>Заголовок 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>

Данный текст является ознакомительным фрагментом.

Читать книгу целиком

Поделитесь на страничке

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

Фиксируем размер ячеек HTML таблицы с помощью CSS3

CMS
Recluse

21.05.2017

5 299

0

100.00%

1

08.04.2019

Фиксированный размер ячеек через CSS
Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном размере, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td>). С помощью 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> <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; }

Html толщина таблицы – Задаём размеры отдельных ячеек и столбцов — Знакомство с таблицами — HTML Academy

Объемная таблица | htmlbook.ru

Таблица html

Теги таблицы html

Как обозначаются строки в таблице html

Ширина таблицы html

Ширина таблицы html в процентах

Высота строки таблицы html

Особенности таблиц | htmlbook.ru

Вложенные таблицы

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

Высота ячеек

Порядок ячеек

Загрузка таблицы

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

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

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

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

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

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

Фон HTML-таблиц

3.5. Ширина и высота таблицы и ячеек. HTML, XHTML и CSS на 100%

Фиксируем размер ячеек HTML таблицы с помощью CSS3

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

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

Рубрики