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


table {  /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */  table-layout: fixed; } .fixed-width {  width: 100px; } .col-12 {  width: 100%; } .col-11 {  width: 91.666666667%; } .col-10 {  width: 83.333333333%; } .col-9 {  width: 75%; } .col-8 {  width: 66.666666667%; } .col-7 {  width: 58.333333333%; } .col-6 {  width: 50%; } .col-5 {  width: 41.666666667%; } .col-4 {  width: 33.333333333%; } .col-3 {  width: 25%; } .col-2 {  width: 16.666666667%; } .col-1 {  width: 8.3333333333%; }  /* Stylistic improvements from here */  .align-left {  text-align: left; } .align-right {  text-align: right; } table {  width: 100%; } table > tbody > tr > td, table > thead > tr > th {  padding: 8px;  border: 1px solid gray; }

qaru.site

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

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

Ширина ячеек

Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width="200" (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек

Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.

Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.

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


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

Пример 2. Свойство table-layout

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

Рис. 1. Отображение рисунка при использовании свойства table-layout

Рис. 1. Отображение рисунка при использовании свойства table-layout

Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).

Рис. 2

Рис. 2. Отображение рисунка в браузере Safari

  • Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.

Пример 3. Полосы прокрутки в ячейках

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

Рис. 3. Отображение рисунка при использовании свойства overflow

Рис. 3. Отображение рисунка при использовании свойства overflow

Содержимое ячеек

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

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor="#ffcc00"></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (&nbsp;). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.


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

Объединение ячеек

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

Ячейка 1 Ячейка 2
Ячейка 3
Ячейка 4

Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками

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

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

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

Скорость загрузки таблицы


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

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

htmlbook.ru

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой…

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)


У тега table есть следующие атрибуты:

width — ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor — цвет фона ячеек таблицы
background — заливает фон таблицы рисунком
border — рамка и границы в таблице. Толщина указывается в пикселях
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

<html>     <head>     <title>Таблица html</title>     </head>  <body>    <table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->       <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->             <td>               Стобец 1          </td>             <td>               Стобец 2          </td>      </tr>        <tr>           <td>              Текст в первой ячейке первого столбца          </td>            <td>               Текст во второй ячейке второго столбца          </td>      </tr>      </table>     </body>  </html>

В результате в браузере будет выведена таблица следующего вида

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

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

void — рамки нет,
above — только верхняя рамка,
below — только нижняя рамка,
hsides — только верхняя и нижняя рамки,
vsides — только левая и правая рамки,
lhs — только левая рамка,
rhs — только правая рамка,
box — все четыре части рамки.

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

none — между ячейками нет границ,
groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows — границы только между строками,
cols — границы только между стобцами,
all — отображать все границы.

Рассмотрим пример кода

<html>     <head>     <title>Таблица html</title>     </head>  <body>    <table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками -->       <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->            <td>               Стобец 1          </td>             <td>              Стобец 2          </td>      </tr>        <tr>           <td>              Текст в первой ячейке первого столбца          </td>            <td>               Текст во второй ячейке второго столбца          </td>      </tr>      </table>     </body>  </html>

Результат

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

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

align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

<html>     <head>     <title>Таблица html</title>     </head>  <body>    <table width="400" align="center" cellspacing="5" cellpadding="10">   <!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->       <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->          <td>               Стобец 1          </td>             <td>               Стобец 2          </td>      </tr>        <tr>           <td>              Текст в первой ячейке первого столбца          </td>            <td>               Текст во второй ячейке второго столбца          </td>      </tr>      </table>     </body>  </html>

В браузере отобразится выравненная по центру таблица следующего вида

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

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

  <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->  <!-- цвет действителен для всех ячеек td -->          <td>               Стобец 1          </td>             <td>               Стобец 2          </td>      </tr>

Для тегов tr и td есть следующие

align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor — задает цвет строки
width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height — высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

<html>     <head>     <title>Таблица html</title>     </head>  <body>    <table width="400" cellspacing="5" cellpadding="10">   <!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->       <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->          <td>               Стобец 1          </td>             <td>               Стобец 2          </td>      </tr>        <tr>           <td align="left">              Текст в первой ячейке первого столбца          </td>            <td align="right">               Текст во второй ячейке второго столбца          </td>      </tr>      </table>     </body>  </html>

Результат

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

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

Спасибо за внимание! Надеюсь материал был полезен!

tradebenefit.ru

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном размере, то с помощью третьей версии 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-таблицы надо использовать три типа тегов, это <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

Указание размеров отдельных ячеек и столбцов

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

Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height.

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

  1. Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
    class="cell-50px"

    А после этого следует применить стили для данных классов.

  2. Задействовать атрибут style, внутри которого прописать необходимый CSS-код.

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

<td style="width: 30px;">  ... </td>

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

Пример:

<table>  <caption>Таблица с заданными размерами</caption>  <tr>  <th style="width:30px">1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr>  <tr>  <th>1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr>  <tr>  <th>1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr> </table>

Результат в браузере:
Таблица с заданными размерами

Как изменить размер шрифта в таблице

Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size. Давайте зададим размер шрифта для элементов <th>:

th {  font-size: 30px; }

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

webshake.ru

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

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

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

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

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

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

th {border: 1px solid grey;}

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

td {border: 1px solid grey;}

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

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

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

table {border: 3px solid grey;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

Синтаксис

table {table-layout: fixed;}

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

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

top-table

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

top-table9

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

top-table10

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

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
top-table11

table {   background: url("https://html5book.ru/images/blurry.jpg") no-repeat;   background-position: 100% 55px;  }  th {   font-weight: normal;   color: #339;   padding: 10px 12px;   }  td {   background: url("https://html5book.ru/images/back.png");   color: #669;   border-top: 1px solid white;   padding: 10px 12px;  }  tr:hover td {   background: url("https://html5book.ru/images/back.png");    background: transparent;  }

html5book.ru


You May Also Like

About the Author: admind

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

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

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