Таблицы в HTML | Учебные курсы
Таблицы в HTML предназначены только для табличных данных, а это любой тип содержимого, который может быть семантически расположен в строках и столбцах.
Это похоже на электронную таблицу в Excel.
Синтаксис
Построение таблицы в HTML требует определённой структуры:
- открыть <table>;
- добавить строки через <tr>;
- добавить обычные ячейки через <td> или заглавные ячейки через <th>.
Эта иерархия обязательна и все три элемента необходимы для построения таблицы.
При написании кода вам нужно определить ячейки своей таблицы слева направо и так до низу.
<table> <tr> <td>Джон Леннон</td> <td>Ритм-гитара</td> </tr> <tr> <td>Пол Маккартни</td> <td>Бас</td> </tr> <tr> <td>Джордж Харрисон</td> <td>Соло-гитара</td> </tr> <tr> <td>Ринго Старр</td> <td>Барабаны</td> </tr> </table>
Как вы можете видеть, таблица в HTML является довольно многословной: много тегов для всего нескольких строк данных.
<thead>, <tfoot> и <tbody>
Так же, как веб-страница может содержать «шапку» и «подвал», таблица может содержать головную, основную и нижнюю части. Как и всё в HTML, это чисто по семантическим причинам: предоставление большей структуры вашей таблице.
<thead>, <tfoot> и <tbody> представляют собой наборы строк. Как таковые, они являются прямыми детьми <table> и прямыми родителями одного или более <tr>. Короче говоря, они добавляют один уровень иерархии
<thead> и <tfoot> используются в качестве резюме столбцов.
Давайте улучшим предыдущую таблицу с <thead> и <tbody>:
<table> <thead> <tr> <th>Имя</th> <th>Инструмент</th> </tr> </thead> <tbody> <tr> <td>Джон Леннон</td> <td>Ритм-гитара</td> </tr> <tr> <td>Пол Маккартни</td> <td>Бас</td> </tr> <tr> <td>Джордж Харрисон</td> <td>Соло-гитара</td> </tr> <tr> <td>Ринго Старр</td> <td>Барабаны</td> </tr> </tbody> </table>
<tfoot> отдельно
Давайте также добавим <tfoot> к таблице:
<table> <thead> <tr> <th>Имя</th> <th>Инструмент</th> </tr> </thead> <tfoot> <tr> <th>Имя</th> <th>Инструмент</th> </tr> </tfoot> <tbody> <tr> <td>Джон Леннон</td> <td>Ритм-гитара</td> </tr> <tr> <td>Пол Маккартни</td> <td>Бас</td> </tr> <tr> <td>Джордж Харрисон</td> <td>Соло-гитара</td> </tr> <tr> <td>Ринго Старр</td> <td>Барабаны</td> </tr> </tbody> </table>
Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется
Это исходит из того, что <tbody> может содержать много строк. Но браузер хочет отобразить нижнюю часть до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> идёт сперва в коде.
colspan и rowspan
Вы можете объединить столбцы или строки с помощью colspan и rowspan соответственно. Имейте в виду, для того чтобы объединить столбцы, вам нужно использовать атрибут colspan, так как он позволяет охватить столбец в несколько строк.
<table> <tr> <th colspan="2">Синглы Майкла Джексона</th> </tr> <tr> <th rowspan="3">1979</th> <td>Don't Stop 'Til You Get Enough</td> </tr> <tr> <td>Rock with You</td> </tr> <tr> <td>Off the Wall</td> </tr> </table>
Ячейка «Синглы Майкла Джексона» охватывает два столбца, так что следующая строка включает в себя две ячейки.
Так как ячейка «1979» охватывает три строки, две следующие строки включают в себя только одну ячейку, чтобы добавить пространство для столбца «1979».
Может быть трудно отслеживать, сколько клеток отсутствуют или лишних. Есть один простой способ — сперва постройте полную таблицу 2 на 4, а затем
В нашем случае у нас должно быть восемь ячеек. Мы пишем только пять ячеек, а colspan=»2″ и rowspan=»3″ добавляют три дополнительных ячейки.
Перейти к заданиям
webref.ru
Как создать таблицу в HTML: тег table
Для того, чтобы осуществлять разметку на страницах web документов, применяется немало всевозможных объектов. Наиболее сложными из всех, с точки зрения новичка, являются именно таблицы. Как показывает практика, именно они, а никак не заголовки или, скажем, абзацы, доставляют тем, кто осваивает HTML, немало проблем. А используются таблицы на практике весьма часто.
Именно таблицам, как вы уже могли догадаться, будет посвящен данный уровень. Я расскажу вам о том, как создать таблицу в HTML. Мы будем идти от самых простых таблиц к более сложным. Более того, вы узнаете, как можно красиво оформить их с помощью CSS. И когда вы пройдете этот уровень, внимательно изучив каждый урок, таблицы вам перестанут казаться такой уж непосильной и сложной задачей. Итак, давайте узнаем как создать таблицу в HTML.
Добавление строк
Самая простая таблица в HTML создается с помощью трех тегов.
Тег <table>. Обозначает непосредственно саму таблицу.
Тег <tr>. Предназначен для обозначения строк таблицы. Является аббревиатурой, которая расшифровывается как «table row».
Тег <td>. Аналогично, аббревиатура, которая читается как «table data». Используется для обозначения ячейки внутри строки таблицы.
Данные три тега располагаются друг относительно друга по следующим правилам:
- <td> – внутри тега <tr>;
- <tr> – внутри тега <table>.
Как правило, текстовая информация, присутствующая в таблице, хранится в тегах <td>.
Создавая простую страницу в HTML, следует учитывать тот факт, что все строки должны иметь одно и тоже количество ячеек. Иными словами, количество тегов <td>, присутствующих внутри <tr>, должно быть одинаковым.
Добавление столбцов
Итак, мы разобрались, как происходит добавление строк. А теперь давайте поговорим о столбцах.
Чтобы в таблице появился столбец, необходимо в тег <tr> (строку) добавить как минимум по одному тегу <td> (ячейке).
Давайте создадим простейшую таблицу на новой страничке table.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример таблицы</title> </head> <body> <table> <tr> <td>Верхняя левая ячейка</td><td>Верхняя правая ячейка</td> </tr> <tr> <td>Нижняя левая ячейка</td><td>Нижняя правая ячейка</td> </tr> </table> </body> </html>
В браузере результат будет выглядеть так:
На этом первый урок по созданию таблиц в HTML завершён. Делайте домашку и переходите к следующему уроку.
Особенности таблиц | htmlbook.ru
При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.
Ширина ячеек
Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>
<table cellspacing="0" cellpadding="4" border="1">
<tr>
<td>Левая колонка</td><td>Правая колонка</td>
</tr>
</table>
</body>
</html>Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
- Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
- Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).
Пример 2. Свойство table-layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
TABLE {
table-layout: fixed; /* Ячейки фиксированной ширины */
}
</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>Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
- Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.
Пример 3. Полосы прокрутки в ячейках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
TD DIV {
overflow: scroll; /* Добавляем полосы прокрутки */
width: 200px; /* Ширина элемента */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="4" border="1">
<tr>
<td><div><img src="images/dino.gif"
alt="Динозаврик"></div></td>
<td>...</td>
</tr>
</table>
</body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Отображение рисунка при использовании свойства overflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | |
| Ячейка 4 | |
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>
<table border="1" align="center" cellpadding="4" cellspacing="0">
<tr>
<td bgcolor="#ffcc33">Ячейка 1</td>
<td rowspan="2" valign="top">Ячейка 2</td>
</tr>
<tr>
<td valign="top">Ячейка 3<br><br></td>
</tr>
<tr bgcolor="#cccccc">
<td colspan="2">Ячейка 4</td>
</tr>
</table>
</body>
</html>Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.
При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
htmlbook.ru
Как изменить размер таблицы в HTML
Размеры таблицы, ее высота и ширина, определяются автоматически в зависимости от того, что содержат внутри себя ячейки. Чем больше наполнения в ячейках, тем больше размеры таблицы и наоборот.
Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры. Однако, в настоящий момент мы поговорим лишь о CSS.
Необходимо подчеркнуть, что каждая таблица имеет свою минимальную ширину и минимальную высоту, на которые влияет ее содержание. И даже если вы зададите значения ширины и высоты еще меньше, то ничего не произойдет. Стороны таблицы не переступят свой минимум.
Чтобы указать ширину таблицы необходимо использовать CSS-свойство width, а чтобы задать высоту необходимо применять свойство height.
На примере это выглядит следующим образом.
table {
width: 500px;
height: 100px;
}Результат в браузере:
Полный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица с заданными размерами</title>
<style>
table {
border: solid 1px blue;
border-collapse: collapse;
width: 500px;
height: 100px;
}
td, th {
border: solid 1px blue;
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Таблица с заданными размерами</caption>
<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>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</table>
</body>
</html>Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.
Если вы используете проценты, чтобы задать размеры таблицы, то они будут высчитываться, отталкиваясь от размеров родительского элемента. Если говорить о нашем примере, то речь идет про окно браузера.
Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.
width: auto;или
height: auto;Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.
Указание размеров отдельных ячеек и столбцов
Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.
Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height.
Чтобы добавить стили ячейкам, можно использовать один из двух вариантов:
- Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
class="cell-50px"А после этого следует применить стили для данных классов.
- Задействовать атрибут style, внутри которого прописать необходимый CSS-код.
На практике второй вариант будет выглядеть следующим образом:
<td>
...
</td>Однако, хотим отметить, что менять размеры ячеек по отдельности необходимость возникает не так уж часто. Как правило, это делается в тех ситуациях, когда необходимо задать определенную ширину столбцов таблицы. В таком случае, задача решается проще. Необходимо всего лишь указать ширину ячеек первой строки.
Пример:
<table>
<caption>Таблица с заданными размерами</caption>
<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>
<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