Таблица в html пример – HTML-таблицы

www.webremeslo.ru

HTML: Создание таблицы | Таблица внутри таблицы

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

Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.

Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.

В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. По умолчанию, содержимое тегов <td> выравнивается по левому краю. Второй тег для создания ячеек — это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.

<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>

Таблица внутри таблицы

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

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

<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td>
    <td>строка 2, ячейка 2
	  <table border="1">
        <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
        <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
        <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
      </table>
	</td>
  </tr>
</table>

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

С этой темой смотрят:

puzzleweb.ru

Создание таблиц в HTML — сайт на PHP своими руками

Создание таблиц в HTML. Тег <table> примеры создания таблиц.

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

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

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

Описание тега <table>.

Посмотрим простой пример таблицы и разберем по пунктам:

структура таблицы.

Некоторые примечания:

Несколько слов о растягивании ячеек.

— значит применяем rowspan=»3″.

— имеет одну ячейку 3.

— имеет одну ячейку 4.

— объединяет три ячейки 1, 2, 3

первой строки

Примеры создания таблиц в HTML.

Пример таблицы №1.

Пример страницы с таблицей №1.

Пример страницы с таблицей №1.

Пример страницы с таблицей №1 можно посмотреть здесь.

kapon.com.ua

Табличная HTML верстка сайта: пример и применение

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

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

Вёрстка этого типа делается просто: в теле документа создаётся таблица (и ничего, кроме неё), в ячейки которой добавляется весь контент. Вёрстка потому и называется табличной, что вся страница состоит из таблиц, а вся выводимая информация находится внутри их ячеек. Даже область с основным содержимым страницы (например, со статьёй) — это всего лишь ячейка, текст из которой отображается на экране.

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

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

Итак, пример табличной вёрстки:

<!DOCTYPE html>
<html>
<head>
    <title>Табличная вёрстка</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок</th>
</tr>
<tr>
<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>
</td>
<td>контент</td>
</tr>
<tr>
<td colspan=2>Низ сайта (баннеры, счетчики, информация)</td>
</tr>
</table>
</body>
</html>

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

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

Но взглянем на код с пояснениями.

<table border="1" cellpadding="0" cellspacing="0">

• Тег <table> открывает таблицу.
• Атрибут border задаёт толщину табличных рамок.
• Cellspacing устанавливает расстояние между ячейками. В данном случае оно сделано нулевым, чтобы таблица не расползалась.

<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>

• <th> — открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным.
• Colspan — атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.
• </th> закрывает ячейку.
• Текст между тегами <th> и </th> — это и есть содержимое ячейки, ради него всё и делалось.

</tr> — конец строки.

<th>навигация</th> <th>заголовок</th>

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.

<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>

Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов <ul> </ul> расположен список ссылок. На его основе можно сделать меню сайта.

<tr><td colspan=2>Низ сайта (баннеры, счетчики, информация)</td></tr>

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка — эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.

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

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

Полезные ссылки:

www.seostop.ru

HTML Таблицы

Пример таблицы HTML

Определение HTML-таблицы

Таблица HTML определяется тегом<table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется тегом <th>. Заголовок таблицы по умолчанию, выделяется жирным и устанавливается по центру. Таблица данных/ячейки определяется тегом <td>.

Пример

<table>
 <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
 </tr>
 <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
 </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Примечание: элементы <td> — это контейнеры данных таблицы. Они могут содержать любые HTML-элементы, тексты, изображения, списки, таблицы, и т. д.

Таблицы HTML — Добавление границы

Если не указывать границы для таблицы, они будет показана без границ.

Границы устанавливаются с помощью свойства CSS border:

Помните, нужно определять границы для таблицы и ячеек таблицы.

Таблицы HTML — Рухнули Границы

Если вы хотите, чтобы границы рухнули в одну границу, нужно добавить свойство CSS border-collapse:

Таблицы HTML — Добавление Ячейки

Ячейки задает расстояние между содержимым ячейки и ее границами.

Если Вы не укажете заполнение ячеек таблицы будут отображаться без отступа.

Установить отступы, используйте в CSS свойство padding:

Таблицы HTML — Заголовок Выровнить Слева

По умолчанию, Заголовок таблицы жирный и по центру.

Заголовок таблицы выровнить слева в CSS с помощью свойства text-align:

Таблицы HTML — Добавление Границы Интервала

Границы spacing задает пространство между ячейками.

Установить границы интервалов для таблицы в CSS с помощью свойства border-spacing:

Примечание: Если границы таблицы рухнули, border-spacing не будет иметь никакого эффекта.

Таблицы HTML — Клетки, которые охватывают несколько колон

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <th colspan=»2″>Телефон</th>
  </tr>
  <tr>
    <td>Билл Гейтс</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Таблицы HTML — Клетки, которые охватывают несколько строк

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

Пример

<table>
  <tr>
    <th>Имя:</th>
    <td>Билл Гейтс</td>
  </tr>
  <tr>
    <th rowspan=»2″>Телефон:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Таблицы HTML — Добавление надписи

Чтобы добавить Надпись к таблице, используйте тег <caption>:

Пример

<table>
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>

Пимечание: Тег <caption> должен быть включен сразу же после тега <table>.

Особый стиль для одной таблицы

Чтобы определить особый стиль в специальную таблицу, добавить атрибут id в таблице:

Пример

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
  </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Теперь вы можете определить специальный стиль для этой таблицы:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

Добавить больше стилей:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Краткое содержание

• Используйте в HTML элемент <table> для определения таблиц
• Используйте в HTML элемент <tr> чтобы определить строку таблицы
• Используйте в HTML элемент <td> для определения табличных данных
• Используйте в HTML элемент <th> чтобы определить заголовок таблицы
• Используйте в HTML элемент <caption> чтобы определить надпись таблицы
• Используйте в CSS свойство border чтобы определить границы
• Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек
• Используйте в CSS свойство padding чтобы добавить отступы для ячеек
• Используйте в CSS свойство text-align для выравнивания текста в ячейке
• Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками
• Используйте атрибут colspan для создания ячейки охватывают множество столбцов
• Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк
• Используйте атрибут id для определения одной таблицы

Проверьте себя с помощью упражнений!

Таблица HTML тегов

schoolsw3.com

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

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

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

Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.

Из каких основных тегов состоит таблица?

○ тег TABLE 
Это  главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.

<table></table>

○ тег TR

Внутри контейнера <table>……</table> размещаются ряды:

Ряды создаются с помощью тега <tr></tr>. Именно с помощью этого тега и определяется количество рядов.
Закрывающий тег обязателен.

○ тег TD

Внутри контейнеров <table><tr>……</tr></table> размещаются столбики (ячейки):

Столбики создаются с помощью тега <td></td>.
Закрывающий тег обязателен.

Внимание: без использования всех этих тегов таблицу создать не возможно.

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

Задание: создать таблицу из одного ряда, где будет три столбика.

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

Задание: создать таблицу из трех рядов и трех столбиков.

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -3 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.

Теперь рассмотрим атрибуты для таблицы.

*Атрибуты

○ Границы таблицы в HTML

Чтобы была видна таблица, к тегу <table> применяется атрибут «border».

<table border="1">

Если значение атрибута «border» «0», границы видно не будет, если не прописать к тегу <table> атрибут «border», граница в таблице тоже видна не будет.

<html>
<head>
<title>Границы таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</body>
</html>

Результат:

Попробуйте поменять значение в атрибуте «border» на «10» . 

○ Как объединить ячейки в таблице

Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу <td> .

• colspan — объединение ячеек по горизонтали;
• rowspan — объединение ячеек по вертикали.

<td colspan="2"> 

<td rowspan="2">

В значениях указываете, сколько нужно объединить ячеек.

<table border="1">
<tr>
<td colspan="2">ряд 1 столбик 1</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
<td>ряд 2 столбик 2</td>
</tr>
</table>

Результат:

<table border="1">
<tr>
<td rowspan="2">ряд 1 столбик 1</td>
<td>ряд 1 столбик 2</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
</tr>
</table>

Результат:

Более сложный пример:

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

Результат:

○ Как увеличить расстояние между ячейками таблицы

Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу <table>

<table border="1" cellpadding="10">

В значениях у атрибута «cellpadding» указываете расстояние отступа

<table border="1" cellpadding="20">
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу <table>

<table border="1" cellspacing="7" >

В значениях у атрибута «cellspacing» указываете расстояние между ячейками

<table border="1" cellspacing="7" >
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

○ Как сделать фон таблицы HTML

Чтобы сделать фон таблицы HTML используют к тегу <table> и <td> такие атрибуты:

• BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
• BACKGROUND –фон в таблице заполняется рисунком.

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1" cellpadding="20" background="fon.jpg">
<tr>
<td bgcolor="#33FF99">ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td bgcolor="red">ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

Результат:

○ Как вставить картинку в таблицу HTML

Чтобы вставить картинку в таблицу HTML, между тегом <td> вставляться тег <img>.

<td><img src="1.gif"></td>

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
<td><img src="1.gif"></td>
</tr>
</table>

Результат:

○ Ширина и высота таблицы HTML

Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу <table> атрибут «width» и «height»:

<table border="1">

• Width – ширина таблицы
• Height – высота таблицы

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td>
<td>ячейка 2</td>
</tr>
</table>

Результат:

Значения задаются в пикселях (px)  или  в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу  <td> атрибут «align» и «valign»:

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

• left — прижать содержимое к левой части (по умолчанию);
• center – установить по центру;
• right — прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

• top – прижать содержимое к верху;
• bottom – прижать содержимое к низу;
• middle – установить содержимое посередине

<td align="center" valign="middle">текст</td>

Пример:

<table border="1">
<tr>
<td>ячейка по умолчанию</td>
<td align="right" valign="bottom">содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу</td>
</tr>
<tr>
<td align="left" valign="top">содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху</td>
<td align="center" valign="middle">содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине</td>
</tr>
</table>

Результат:

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом <center></center>:

<center>
Код таблицы
</center>

Пример:

<center>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</center>

Дополнительные и основные теги к таблице

Пример:

<table border="1">
<caption>Таблица для StepkinBlog.ru</caption>
<thead>
<tr>
<th>Название 1</th>
<th>Название 2</th>
 </tr>
 </thead>
<tr>
<td>1</td>
<td>2</td>
 </tr>
</table>

Результат:

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

Предыдущая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13 Следующая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

stepkinblog.ru