Html код таблицы

Основные html теги таблицы

Чтобы сделать таблицу в html, достаточно следующих тегов:

<table>…</table> обрамление самой таблицы;
<tr>…</tr> обрамление строки таблицы;
<td>…</td> обрамление обычной ячейки таблицы;
<th>…</th> обрамление особой ячейки таблицы (текст, размещенный между этими тегами, отображается жирным начертанием с выравниванием по центру).

По умолчанию вокруг ячеек таблицы рамок нет.

Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 3px;  }  table.brd th,  table.brd td {  border: 1px solid #000;  } </style> <h3>Таблица без рамок</h3> <table>  <tr> .    
r> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>
Атрибуты тегов <td> и <th> для объединения ячеек
colspan Число столбцов, перекрываемых ячейкой
rowspan Число строк, перекрываемых ячейкой
Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 5px;  border: 1px solid #000;  text-align: center;  } </style> <table>  <tr>  <td rowspan="2"></td>  <td colspan="2">хорьки</td>  </tr>  <tr>  <td>вес</td>  <td>размер</td>  </tr>  <tr>  <td>самцы</td>  <td>1.2 – 2.5 кг</td>  <td>до 70см</td>  </tr>  <tr>  <td>самки</td>  <td>0.7 – 1.0 кг</td>  <td>до 40см</td>  </tr> </table>

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги:


<caption>…</caption> обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру).
В исходном коде тег <caption> ставится сразу после тега <table>;
<thead>…</thead> обрамление шапки таблицы
(в одной таблице допускается не более одного тега <thead>);
<tbody>…</tbody> группирует строки таблицы в один табличный блок
(таких блоков в таблице может быть несколько);
<tfoot>…</tfoot> обрамление футера, т.е. нижней, завершающей части таблицы
(в одной таблице допускается не более одного тега <tfoot>).
В исходном коде тег <tfoot> ставится до тега <tbody>.
Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 3px;  }  table tr td:last-child {  text-align: right;  }  table tbody {  border-top: 1px solid #000;  border-bottom: 1px solid #000;  } </style> <table>  <caption>Потребление пива</caption>  <thead>  <tr>  <th>Ф.И.О.</th>  <th>литров</th>  </tr>  </thead>  <tfoot>  <tr>  <td>Итого</td>  <td>250</td>  </tr>  </tfoot>  <tbody>  <tr>  <td>Иванов Иван Иванович</td>  <td>133</td>  </tr>  <tr>  <td>Петров Петр Петрович</td>  <td>117</td>  </tr>  </tbody> </table>

Теги группирования столбцов html таблицы


<colgroup>…</colgroup>

группирование столбцов для более удобного форматирования.
В исходном коде тег <colgroup> ставится после открывающего тега <table> и после тега <caption> (если он присутствует), перед тегами <thead>, <tbody>, <tfoot> и <tr>;
<col> один или несколько столбцов в контейнере <colgroup>…</colgroup>
(<col> – одиночный тег).
Атрибут тегов <colgroup> и <col>
span Число столбцов, следующих друг за другом

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

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

<colgroup><col span="3"></colgroup> или <colgroup><col><col><col></colgroup>    

Пример
<style type="text/css">  table {  width: 200px;  }  col {  border: 1px solid #000;  width: 25%;  }  th {  border: 1px solid #000;  padding: 5px;  }  tr {  height: 20px;  } </style> <table>  <colgroup style="background-color: yellow"><col span="2"></colgroup>  <colgroup style="background-color: red"><col><col></colgroup>  <tr>  <th colspan="2">желтый</th>  <th colspan="2">красный</th>  </tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr> </table>

Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n), где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan.

htmlweb.ru

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


  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы <colgroup> и <col>
  • 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы

1. Как создать таблицу

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

<table>  <tr><th>текст заголовка</th><th>текст заголовка</th></tr> <!--ряд с ячейками заголовков-->  <tr><td>данные</td><td>данные</td></tr> <!--ряд с ячейками тела таблицы-->  </table>
текст заголовка текст заголовка
данные данные

Рис.1. Внешний вид таблицы без форматирования css-свойствами

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

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

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

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

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */  table {width: 100%;}  /* задаст фиксированную ширину для таблицы */  table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right, ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.


2. Как создать строки (ряды) таблицы

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

3. Как сделать ячейку заголовка столбца таблицы

Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  </table>

4. Как сделать ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  <tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>  </table>

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

Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.


<table>  <caption>Перечень продуктов</caption>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </table>

6. Группирование строк и столбцов таблицы

Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>.


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

<table>   <colgroup>   <col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->   <col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->   </colgroup>   <tr>   <th>№ п/п</th>   <th>Наименование</th>   <th>Цена, руб.</th>   </tr>   <tr>   <td>1</td>   <td>Карандаш цветной</td>   <td>20,00</td>   </tr>   <tr>   <td>2</td>   <td>Линейка 20 см</td>   <td>30,00</td>   </tr>  </table>

table_primer
Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов <col> и <colgroup>

7. Группировка разделов таблицы

Элемент <thead> создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами <tbody> и <tfoot> для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент <table>, после <caption> и <colgroup>, и перед <tbody>, <tfoot> и <tr> элементами. В пределах одной таблицы можно использовать один раз.

Элемент <tbody> группирует основное содержимое таблицы. Используется в сочетании с элементами <thead> и <tfoot>.

Элемент <tfoot> создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега <thead>, перед тегами <tbody> и <tr>.

<table>   <thead>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   </thead>  <tfoot>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </tfoot>  <tbody>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>  </tbody>   </table>

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

<table>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td><!-- Задаем количество ячеек по горизонтали для объединения-->   </tr>  </table>
table_primer2
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы
Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.
<td colspan="3">
Возможные значения: число от 1 до 999.
headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
<th id="идентификатор">...</th>
<th headers="идентификатор">...</th>

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id.
rowspan Количество ячеек в столбце для объединения по вертикали.
<td rowspan="2">
Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
<col span="2">
Принимаемые значения: любое целое положительное число.

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

table-html
Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Разметка HTML

<table>   <caption>Меню ресторана "Ромашка"</caption>    <tr>   <th rowspan="2" class="first">Кухня</th>   <th colspan="2">Холодные блюда</th>   <th colspan="2">Горячие блюда</th>   <th rowspan="2">Десерты</th>   </tr>   <tr>   <td class="first">Салаты</td>   <td class="first">Закуски</td>   <td class="first">Первые блюда</td>   <td class="first">Вторые блюда</td>   </tr>   <tr>   <td rowspan="3" class="first">Русская</td>   <td>Винегрет</td>   <td>Язык с хреном</td>   <td>Щи с квашеной капустой</td>   <td>Вареники с картошкой</td>   <td>Печеные яблоки с медом</td>   </tr>   <tr>   <td>Оливье</td>   <td>Студень говяжий</td>   <td>Рассольник домашний</td>   <td>Караси запеченые в сметане</td>   <td>Блинчатый пирог</td>   </tr>   <tr>   <td>Сельдь под "шубой"</td>   <td>Судак заливной</td>   <td>Мясная солянка</td>   <td>Котлеты "Пожарские"</td>   <td>Пирожное "Картошка"</td>   </tr>   <tr>   <td rowspan="3" class="first">Испанская</td>   <td>Севиче из гребешков</td>   <td>Эмпанадас</td>   <td>Хлебный суп с чесноком</td>   <td>Паэлья с морепродуктами</td>   <td>Чуррос</td>   </tr>   <tr>   <td>Тимбал из авокадо и тунца</td>   <td>Ахотомате</td>   <td>Астурийская фабада</td>   <td>Свиное раксо</td>   <td>Альмойшавена</td>   </tr>   <tr>   <td>Фасоль с ветчиной</td>   <td>Чанфайна</td>   <td>Рыбный суп с манными клецками </td>   <td>Тортилья картофельная</td>   <td>Бунуэлос</td>   </tr>   <tr>   <td rowspan="3" class="first">Французская</td>   <td>Вогезский салат</td>   <td>Рийет из курицы</td>   <td>Баклажанный крем-суп "Ренуар"</td>   <td>Картофель огратен</td>   <td>Бриоши</td>   </tr>   <tr>   <td>Салат "Панзанелла"</td>   <td>Делисьез из сыра</td>   <td>Французский тыквенный суп</td>   <td>Гратин из птицы</td>   <td>Лигурийский лимонный пирог</td>   </tr>   <tr>   <td>Тар-тар</td>   <td>Маринованный лосось</td>   <td>Суп "Конти"</td>   <td>Тартифлетт</td>   <td>Саварен "Триумф"</td>   </tr>   </table>

Стили CSS

body {   margin: 0;   background: #F4F1F8;  }  table {   border-collapse: collapse;    line-height: 1.1;   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;   background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);   color: #0C213B;  }  caption {   font-family: annabelle, cursive;   font-weight: bold;   font-size: 2em;   padding: 10px;    color: #F3CD26;   text-shadow: 1px 1px 0 rgba(0,0,0,.3);   }  caption:before, caption:after {   content: "274B";   color: #A9E2CC;   margin: 0 10px;  }  th {   padding: 10px;    border: 1px solid #A9E2CC;  }  td {   font-size: 0.8em;   padding: 5px 7px;   border: 1px solid #A9E2CC;  }  .first {   font-size: 1em;   font-weight: bold;   text-align: center;  }

html5book.ru

Онлайн генератор таблиц html: обзор сервисов

Собраны три сайта, находящиеся в топе Google по соответствующему запросу. Каждый из них предлагает готовый код, который банальным копированием добавляется в существующий шаблон.

Сервис №1 — daruse.ru сгенерирует таблицу с заданным количеством столбцов и ячеек.

Html код таблицы

Плюсы:

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

Минусы:

  • в выданный код вписана ссылка на сайт, новичок ее может не заметить;
  • не предусмотрен респонсивный вариант;
  • доступен единственный вид дизайна.

Сервис №2 — www.tablesgenerator.com. Расширенная функциональность, обилие предустановленных опций.

Html код таблицы

Плюсы:

  • шесть встроенных тем в разной цветовой гамме;
  • можно создать собственный бэкграунд для одной или нескольких ячеек;
  • на выбор шрифты, объединение и разбивка, центрирование;
  • compact mode — версия с инлайн-встраиванием.

Минусы:

  • неинтуитивен, сложно разобраться;
  • интерфейс англоязычный;
  • заявлена сортировка колонок, которая работает не во всех версиях браузеров.

Сервис №3 — www.apsolyamov.ru. Простейший из представленных онлайн генератор таблиц html.

Html код таблицы

Плюсы:

  • интуитивен и прост в использовании;
  • объединение ячеек;
  • русскоязычный интерфейс без рекламы.

Минусы:

  • только Html-код, каскадные стили не предусмотрены;
  • отсутствуют заголовки, темы и цветовые схемы.

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

Самостоятельная верстка

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

Для работы понадобится редактор разметки. Если недоступен дорогой Dreamweaver, воспользуйтесь free-редакторами. Это Gedit (для Windows и Ubuntu), Brackets или приложение блокнот. Используя последний, не забывайте менять при сохранении расширения файлов с txt.

Шаг 1. Создаем Html код таблицы

Это просто, так как разметка едина для всех вариаций. Обрамление задается тегом table. Внутрь вставляется необходимое количество строк и столбцов с помощью тегов td и tr.

<table border=»1″>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>

Обратите внимание, в нашем исходном коде не указан элемент tbody. Но если открыть страницу в браузере и заглянуть в инструменты разработчика — он там присутствует и даже имеет стили. Это встроенное поведение браузеров. Если тег необходим для оформления, он прописывается вручную.

Html код таблицы

При необходимости указывается заголовок (thead), отступы от рамки до содержимого (cellpadding)  или между ячейками (cellspacing). Тег colspan объединит заданное количество столбцов внутри одной строки.

<table border=»1″ cellpadding=»8″ cellspacing=»3″>
<thead>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</thead>
<tr>
<td>ячейка</td>
<td colspan=»3″>ячейка</td>
<td>ячейка</td>
</tr>

Html код таблицы

Шаг 2. Индивидуальное оформление

Зададим собственный внешний вид конструкции — для этого создается таблица стилей. Добавляется в head таким образом:

<link href=»/style.css» rel=»stylesheet»>

Или используется готовая из шаблона сайта.

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

Прежде всего, зададим границы и отступы, дополнительно установим шрифт и цвета. На этом же этапе разумно поставить собственный фон:

table {
background: #fafafa; /* фон таблицы */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; /* шрифт */
color: #666; /* цвет текста */
text-shadow: 1px 1px 0px #fff; /* тень текста */
border:#ccc 1px solid; /* цвет бордюра */
border-collapse: collapse; /* игнор sellspasing, бордюр в одну линию */

/* == кроссбраузерная тень таблицы ==*/
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
thead {
font-weight: bold; /* жирный шрифт */
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
}
/* фон заголовка с градиентом*/
thead td{
border: none;
background: rgb(252,255,244); /* старые браузеры */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fcfff4′, endColorstr=’#b3bead’,GradientType=0 ); /* IE6-9 */
}
td {
padding: 18px; /* отступы ячеек */
}

После двоеточий внутри фигурных скобок установите свои значения оттенков и отступов по аналогии.

Html код таблицы

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

tr:hover {background-color:#f2f2f2;} /*после знака решетки задайте свой цвет*/

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

Html
<tr class=»odd»>
Css
.odd {
background: #f6f6f6; /* горизонтальная зебра */
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}

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

tr:nth-child(2n-1) {
background: #dcd7e4; /* горизонтальная зебра */
}

Html код таблицы

Эти параметры прописываются в CSS, но допустимо использование инлайновой вариации разметки. Синтаксис выглядит так:

<table style=»border-collapse:collapse; background: #f2f2f2; font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; color: #444;border: #aaa7b5;border-collapse: collapse;»>

firelinks.ru

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

Как делается таблица, ее базовая структура. Обо всем по порядку. Для создания таблицы в самом начале используют элемент table. Дальнейшее ее содержимое описывается по строкам. Далее открывается тег <tr>, который обозначает начало новой строки в таблице.  В середине тега <tr> помещаются элементы <td>. Элемент <td> соответствует отдельной ячейкой в данной строке.

Когда строчка заканчивается, закрывается тег </tr>. Еще раз… в начале указали <table>, потом открыли <tr>, в нем используете <td>, закрываете </tr> и закрываете </table>. Каждая из ячеек обязательно должна быть представлена элементов <td> и так же его закрытием </td>. Прочитайте статью до конца, с каждым новым тегом или атрибутом я навожу пример кода и конечного результата.

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

  • Тег tr;
  • Тег td.

к оглавлению ^

Написание кода в блокноте

Создаем и открываем обычный блокнот, в него копируем уже готовый код. После всех действий, вам нужно будет переименовать расширение txt блокнота на html. Каждая таблица начинается и должна быть закрыта тегом table. Каждая строка в таблице начинается и заканчивается тегом tr. В каждой строке существуют свои столбцы, которые должны быть заключены в тег td. Все из перечисленных тегов должны быть открыты и закрыты.

Если вспомнить основы html, к главному тегу таблицы table так же могут быть добавлены теги border, CELLspacing, CELLpadding, Width и Align. Про некоторые из них речь будет идти в этой статье. Каждый из них отвечает за свое свойство и тем самым добавляет дополнительные возможности вашей таблице. При желании, не обязательно использовать их в каждой таблице.

Скачай бесплатно пять техник верстки.

Как самому сверстать сайт

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

Как создать таблицу в html

к оглавлению ^

Готовый пример

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

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

Таблица в html в блокноте

Бывает такое, что нужно несколько ячеек обьединить в одну, для этого используется атрибут colspan. Его так же можно использовать с элементами <th> и <td>. Вы добавляете в элемент <td colspan=”3”>, тем самым говорите браузеру, что хотите обьединить три ячейки в одну. Всегда обращайте внимание и будьте внимательные, когда нужно открыть и закрыть объединение, чтоб в дальнейшем не запутаться и не искать часами ошибку.

к оглавлению ^

Как объединить ячейки

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

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

Html таблицам можно задать ширину и промежуток между ячейками. Данный метод уже считается устаревшим, так как все это сейчас используется в CSS, но все же существует. Вы можете указать ширину вашей таблицы в пикселях. В самом начале в теге <table> вы задаете ширину.

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

 

к оглавлению ^

Как сделать границы

Таблицу вы сделали, задали ширину, все написали, теперь нужно привести ее в нормальный вид. Для этого таблице можно задать границу в пикселях. Делается это благодаря атрибуту border, который идет вместе с элементов <table>. Не задавайте слишком большие границы, лучше этим вы не сделаете никому.

  1. Параметр Border.
  2. Параметр CELLSPACING.
  3. CELLPADDING.

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

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

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

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

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

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

Как сделать в таблице границы

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

к оглавлению ^

Пример готовой таблицы

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

  1. Границы и выравнивание.
  2. Открытие и закрытие тегов tr и th.
  3. Объединение строк.
  4. Объединение столбцов.

Готовая таблица в html

Кроме перечисленных параметров BORDER, CELLPADDING и CELLSPACING, существует еще несколько, которые так же пользуются популярностью и часть применяются на практике. Управление шириной и высотой таблицы (WIDTH и HEIGHT) и выравнивание по центру или по краям (ALIGN).

к оглавлению ^

Высота и ширина

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

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

к оглавлению ^

Выравнивание

Точно так же, как с примером по границам и отступам, всей таблице можно задать выравнивание по одной из сторон или по центру. К главному тегу таблицы table добавляется параметр ALIGN, который отвечает за выравнивание по сторонам. Допустимое значение LEFT (выравнивание по левой стороне), RIGHT (выравнивание по правой стороне). Попробуйте установить CENTER, получить у вас выровнять таблицу по центру или нет?

Если дело касается цвета таблицы или конкретных ячеек, вы так же можете использовать атрибут bgcolor, чтобы задать цвет шапке вашей таблицы или нужным вам ячейкам. Выравнивайте таблицу по центру или по правому краю. Используйте в таблицах тег font для изменения шрифта ваших данных. Так же можно задать в таблице цвет текста, его размер… что угодно.

Евгений Несмелов

nesmelov.ru

Границы и рамки

По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега <table>. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

  • background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
  • bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

  • cellspacing — расстояние между границами соседних ячеек;
  • cellpading — расстояние между содержимым и границей ячейки.

Например:

Визуальное отображение данного кода в браузере таково:

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

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

  • left — выравнивание по левой границе;
  • right — выравнивание по правой границе;
  • center — выравнивание по центру.

Параметр valign может иметь такие значения:

  • bottom — выравнивание по нижней границе;
  • top — выравнивание по верхней границы;
  • middle — выравнивание посередине.

Пример:

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

Вставка изображения в HTML таблицу

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

Например:

Дополнительными атрибутами в данном случае являются:

  • width — ширина;
  • height — высота;
  • alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
  • title — подпись к картинке;
  • align — горизонтальное выравнивание;
  • valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href="страница, на которую ведёт ссылка"><img src="имя файла.jpg"></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

Генераторы HTML таблиц

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

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

Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag. В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.

Несмотря на то, что сервис http://www.2createawebsite.com/build/table_generator.html является зарубежным, настроек для генерации таблицы здесь меньше, чем в предыдущем примере. Имеются лишь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:

Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.

Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:

Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

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

Желаем успехов!

www.internet-technologies.ru

Перейти вниз

Вернуться к началу


 

Вы не можете отвечать на сообщения

help.forum2x2.ru


You May Also Like

About the Author: admind

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

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

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

Adblock
detector