Как сделать или вставить таблицу на сайте. 5 способов
Эта статья будет посвящена разбору возможностей создания и вставки таблиц, в том числе таблиц excel на сайт.
Сначала рассмотрим, как сделать и вставить таблицу на сайте с помощью дополнений. Потом обратим внимание на отдельные онлайн сервисы для создания таблиц. Следующим шагом рассмотрим сервис, позволяющий делать таблицы более красивыми.
Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.
Итак, начнем…
Прежде всего, хочется заметить, что не может быть одного единственного универсального решения для создания и вставки таблиц на сайте, который бы подходил для любых сайтов. Разные движки (Вордпресс, Джумла и т.п.), разные темы или шаблоны со своим дизайном, а также разные задачи, под которые создаются таблицы и разные размеры таблиц вынуждают каждого вебмастера подыскивать свой вариант создания таблиц.
И цель данной статьи состоит в том, чтобы помочь разобраться в разных возможностях, увидеть преимущества и недостатки каждого вида создания и добавления таблиц на сайте. И уже потом решать, какой вариант использовать в своем конкретном случае.
Плагины для создания и вставки таблиц на сайт
Для разных движков, будь то это WordPress, Joomla или любой другой, существуют дополнения или плагины, расширяющие возможности оформления страниц сайта. В зависимости от того, какой движок у вашего сайта, вы можете просто в поисковике набрать что-то типа: таблица в Водпресс или как создать таблицу в Joomla и получить кучу сайтов, которые делают подробный разбор разных плагинов.
Для движка Вордпресс, например, один из самых популярных плагинов для создания таблиц, это плагин TablePress.
У каждого плагина есть свои собственные преимущества. Одни могут позволять быстро создавать простые таблицы на сайте, в других же придется повозиться, чтобы сделать красивые таблицы для сайта.
Но, также необходимо понимать, что у плагинов есть и свои недостатки.
Так, чем больше разных плагинов установлено на сайте, тем более нагруженным и уязвимым становится сайт.
Кроме того, не все плагины будут корректно работать с разными темами (шаблонами). Вот, к примеру, даже такой популярный плагин, как расширенный текстовый редактор CKEditor, тоже работает не безупречно.
В нем, конечно, есть много ценных возможностей, таких как изменение шрифта и его размера, а также выделение текста разным цветом. И, что касается нашей темы, то в этом плагине есть возможность создания и вставки таблиц:
Удобно, — ставим курсов в том месте текста, где нужно создать и вставить таблицу, нажимаем на значок таблицы, как показано на снимке выше и с помощью всплывающего окна настраиваем нужную нам таблицу:
Здесь все интуитивно понятно. И просто поэкспериментировав, можно быстро понять, как создавать таблицы на сайте с помощью этого плагина. Единственное что хочется дополнить, — если у вас тема сайта адаптивная, т.е. размер корректно изменяется под экраны мобильных устройств, и если вам нужно сделать таблицу во всю ширину страницы, то в поле Ширина можно указывать в процентах, например 100%.
Удобный плагин-редактор, что и говорить! Но, как я уже говорил, есть и недостаток у него с некоторыми темами. Например, при сохранении страниц в некоторых темах добавляются лишние переносы строк и убираются они только в режиме HTML. Конечно, можно приспособиться, но, если не хватает внимательности, то можно это пропустить и в оформлении страниц будут лишние переносы строк.
Также данный плагин не «дружит» с некоторыми другими плагинами, которые добавляют свои кнопки в стандартную панель редактора для быстрого и удобного вывода функций.
Вот, к примеру, есть плагин WP-Опросы для удобного создания и ведения опросов на сайте. При установке он автоматически встраивает кнопку Вставить опрос:
При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК:
Опрос вставится в то место страницы, где стоял курсор.
А узнать ID опроса можно в разделе, где находятся все созданные опросы:
Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).
Конечно, здесь тоже можно приспособиться, просто вставляя вручную код , где цифра 2, это ID опроса.
Этот пример лишь подчеркивает, что не все может быть гладко с разными плагинами. И если в них действительно есть необходимость, то нужно выбирать, какой подойдет и можно ли приспособиться к некорректной работе, если она появится.
И, что касается создания и вставки таблиц, так уж ли необходимо использовать плагины или можно воспользоваться другими способами?! Рассмотрим другие способы.
Сайты для создания таблиц. Генераторы таблиц
Чтобы не тратить время на поиск, установку и вникание в функционал того или иного плагина для создания таблиц можно воспользоваться онлайн сервисами, которые формируют необходимую таблицу и предоставляют код таблицы для сайта.
Вот один из таких бесплатных сайтов для создания таблиц: Генератор HTML кода таблицы:
Генератор кода таблицы на русском языке, так что быстро разобраться не составит труда: выставили необходимые настройки, посмотрели (1), если все подходит, Сгенерировали код (2), скопировали, вставили на сайт и заполнили ячейки необходимыми данными.
Единственное что можно уточнить, — в сгенерированном коде для вставки на страницу сайта копировать необходимо не полностью весь html, а только саму таблицу, как показано на снимке:
Вот еще один русскоязычный генератор html таблиц для сайта:
В отличие от предыдущего, функционал здесь минимален, но зато можно сразу же заполнить необходимые ячейки, а также объединить нужные ячейки в таблице.
И еще обратим внимание на один русскоязычный онлайн генератор таблиц:
Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!
Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще несколько сервисов для создания таблиц: HTML Table Generator и Kotatsu. Эти генераторы таблиц англоязычные, но разобраться в них просто, а если еще пользоваться браузером с автопереводчиком, то вообще никаких проблем.
Красивая таблица на сайте
Если хочется придать таблице более красивый вид, то можно воспользоваться онлайн генератором стилей для таблиц. Сервис англоязычный, но через автопереводчик браузера Хром вот какие возможности можно увидеть сразу:
В этом сервисе можно настроить таблицу с нужными стилями. И потом только остается взять сгенерированный CSS код, вставить его в основной файл стилей темы, а созданную таблицу заключить в теги: <div class=»CSSTableGenerator» >таблица</div>
Как вставить таблицу Excel на сайт
Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.
Суть работы сервиса простая. Нужно выделить и скопировать необходимую готовую таблицу или ее часть:
Далее, нужно зайти в вышеупомянутый сервис, вставить скопированную таблицу и сгенерировать html код таблицы:
Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:
И вставляем к себе на сайт.
Если таблица небольшая, то проблем не должно быть. Но если таблица широкая, в таком случае мы сталкиваемся с серьезным недостатком размещения таблиц на сайте, а именно с тем, что широкие таблицы могут не помещаться на странице.
Вот как это может выглядеть:
Как видно на снимке, таблица выходит на границы сайта.
Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.
Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?
Один из способов, это просто загружать готовые файлы на сайт и приводить ссылки для скачивания этих файлов с таблицами.
Но, есть более интересный способ, который рассмотрим далее.
Адаптивные таблицы для сайта через Гугл Диск
Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:
Включаем доступ по ссылке и копируем ее:
Теперь можно разместить на сайте, например, так:
Расписание Саратовского автовокзала (нажмите для просмотра)
Таким образом, и для пользователей удобно, — всегда на любом устройстве корректно будет отображаться таблица и скачать файл можно на компьютер (кстати, было бы уместно также в файле вставить адрес своего сайта для вирусного продвижения, если предполагается много скачиваний).
И для самого владельца сайта использование Гугл Диска делает удобным добавление таблиц на сайт, ведь проще создать сложную таблицу в Excelе, чем «мучится» с их созданием на сайте с помощью разных кодов html.
Более того Гугл дает возможность использовать не просто ссылки на скачивание файлов, но также можно таблицы вставлять прямо на страницы сайта.
Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:
Заходим в Меню -> Публикация в Интернете:
Копируем предоставленный код во вкладке Встроить:
И размещаем на своем сайте в нужно месте.
Примечание: Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.
Итак, размещаем код таблицы для сайта на странице и вот что получается (воспользуйтесь вкладками и областями прокруток):
Вот это уже очень даже красивая таблица получается! И пользоваться удобно, и в случае необходимости ее можно открыть в отдельном окне и вообще даже скачать к себе на компьютер.
Улучшаем использование таблиц
Если на одной странице необходимо вставить много таблиц, то для более удобного их использования посетителями можно воспользоваться плагином Shortcodes Ultimate и заключить таблицы в аккордион:
Пример таблицы во всю ширину и высоту 480 рх
Пример таблицы с шириной 90% и высотой 480 рх
Пример таблицы с шириной 80% и высотой 200 рх
Адаптивные таблицы для сайта через Onedrive
По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive.
Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы (1):
Можно также воспользоваться дополнительными настройками внешнего вида таблицы (2):
Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:
Конечно, встраивание таблиц с помощью сервиса Onedrive уступает Гуглу из-за нестабильности и некорректного отображения некоторых элементов таблиц, но, возможно, в будущем Майкрософт улучшится в этом отношении.
Подводя итоги, можно отметить, что вариантов для создания и вставки таблиц на сайте существует достаточное кол-во, так что для конкретного случая вполне можно подобрать свой вариант. Если же вы знаете или пользуетесь каким-то другим эффективным способом размещения таблиц на сайте, — делитесь опытом в комментариях!
ПОДЕЛИТЕСЬ В СОЦ.СЕТЯХ:
infodio.ru
Шпаргалка по работе с таблицами
Опубликовано: 19 февраля 2016 Обновлено: 30 апреля 2019
1. Как задать таблице класс или идентификатор
Если на одной странице или на сайте присутствует несколько таблиц и для них требуется установить разное стилевое оформление, то для таких таблиц добавляется атрибут class или id с соответствующим значением, например,
<table> <tr> <th>Comedy</th> <th>Adventure</th> <th>Action</th> </tr> <tr> <td>Scary Movie</td> <td>Indiana Jones</td> <td>The Punisher</td> </tr> <tr> <td>Epic Movie</td> <td>Star Wars</td> <td>Bad Boys</td> </tr> </table> <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>23.5</td> </tr> <tr> <td>Google</td> <td>50.2</td> <td>40.63</td> <td>45.23</td> </tr> </table>
При этом class="list" можно будет использовать для оформления других таблиц (элементов), а id="company" — только для одной таблицы.
2. Как добавить ссылки в таблицу
Ячейки таблицы могут содержать практически любые элементы. Чтобы вставить ссылку в ячейку, нужно добавить в нее элемент <a> с текстом ссылки, например,
<table> <tr> <th>Comedy</th> <th>Adventure</th> <th>Action</th> </tr> <tr> <td><a href="https://ru.wikipedia.org/wiki/Очень_страшное_кино">Scary Movie</a></td> <td>Indiana Jones</td> <td>The Punisher</td> </tr> <tr> <td>Epic Movie</td> <td>Star Wars</td> <td>Bad Boys</td> </tr> </table>
Стилизовать такие ссылки можно при помощи определения table a {}, или же задав класс непосредственно для ссылки.
3. Как создать ссылки на ячейки таблицы
Ссылка на ячейку таблицы создается при помощи якоря. Для этого нужной ячейке добавляется атрибут id со значением, например,
<td>содержимое ячейки</td>.
Чтобы обеспечить переход со ссылки на эту ячейку, задаём ей соответствующее значение пути
<a href="#значение_идентификатора_ячейки">текст ссылки</a>.
Если переход осуществляется с одной страницы сайта на другую, якорь добавляется после адреса страницы, например,
Для наглядности результат перехода можно выделить, например, сменить цвет фона ячейки, цвет текста ячейки, добавить подчеркивание и т.д.
td:target {background: salmon;}
td:target {color: salmon;}
td:target {text-decoration: underline;}Пример
Таблица составлена на основе рейтинга зрителей. Перейдя по этой ссылке, вы узнаете какой фильм мой самый любимый.
| Фантастика | Комедия | Приключения |
|---|---|---|
| Марсианин | Самый лучший день | Миссия невыполнима: Племя изгоев |
| Мстители: Эра Альтрона | Пиксели | Агенты А.Н.К.Л. |
| Голодные игры: Сойка-пересмешница | Барашек Шон | Последние рыцари |
4. Одинаковая ширина колонок таблицы
По умолчанию ширина таблицы определяется содержимым ее ячеек. Управлять шириной столбцов (ячеек) можно следующими способами:
1) Если для таблицы задана ширина, то table {table-layout: fixed;} сделает все ячейки одинаковой ширины, исходя из ширины самой длинной ячейки.
2) Если для таблицы задана ширина table {width: 100%;}, и ширина ячеек вычисляется в %, например, td {width: 25%;}, то ширина всех ячеек будет равной.
3) Задав фиксированную ширину с помощью единиц длины, например,
При этом не забывайте, что к ширине таблицы будет добавлена ширина границы ячеек и таблицы и внутренние отступы ячеек padding (если не установлено свойство {box-sizing:border-box}).
5. Оформление заголовка таблицы
Заголовок таблицы добавляется с помощью тега
<caption>Заголовок_таблицы</caption>, который вставляется сразу после открывающего тега <table>. По умолчанию сам заголовок расположен перед таблицей, а текст заголовка выравнен по центру.
Управлять положением заголовка можно свойством caption-side, например, caption {caption-side: bottom} поместит заголовок после таблицы.
По сути заголовок является ячейкой таблицы, поэтому для него можно задавать те же свойства, что и для ячеек таблицы, т.е.
caption {
padding: 7px;
background: silver;
font-style: italic;
text-align: right;
}6. Создание вложенных таблиц
Чтобы вложить одну таблицу в другую, нужно поместить код вложенной таблицы в выбранную ячейку основной таблицы, например:
<table> <tr> <th>ячейка заголовка таблицы</th> <th>ячейка заголовка таблицы</th> </tr> <tr> <td>ячейка таблицы</td> <td> <table> <tr> <th>ячейка заголовка вложенной таблицы</th> </tr> <tr> <td>ячейка вложенной таблицы</td> </tr> </table> </td> </tr> </table>
| ячейка заголовка таблицы | ячейка заголовка таблицы | ||
|---|---|---|---|
| ячейка таблицы |
|
Вложенные таблицы могут содержать любое количество строк и ячеек. Для них можно устанавливать любые свойства, отличные от значений основной таблицы, размещать в ячейках изображения, а также другие таблицы.
html5book.ru
Как сделать полосатую таблицу на HTML, CSS, JS, PHP
Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».
1
Полосатая таблица на CSS
В CSS можно применить псевдокласс :nth-child он используется для добавления стиля к элементам на основе нумерации.
<table> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr> <td>4</td> <td>Jake</td> <td>Propper</td> <td>@vso</td> </tr> </tbody> </table>
/* Нечетные строки */
#table tbody tr:nth-child(odd){
background: #fff;
}
/* Четные строки */
#table tbody tr:nth-child(even){
background: #F7F7F7;
}Чтобы сделать разноцветные строки таблицы с количеством цветов более двух, можно применить следующие приём:
/* Строки 1,4,7... */ #table tbody tr:nth-child(3n+1){ background: #f2fff5; } /* Строки 2,5,8... */ #table tbody tr:nth-child(3n+2){ background: #ffeaea; } /* Строки 3,6,9... */ #table tbody tr:nth-child(3n+3){ background: #eeecff; }
snipp.ru
Таблицы HTML4
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Для создания таблиц используются следующие теги:
- <TABLE> — Для обрамления самой таблицы;
- <THEAD> — Определяет заголовки элементов таблицы;
- <TBODY> — Определяет тело таблицы;
- <TFOOT> — Определяет нижнюю, завершающую часть таблицы;
- <CAPTION> — Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} — размещение заголовка относительно таблицы (вверху или внизу таблицы)
- <COLGROUP> — Задание свойств одного или более столбцов;
- <COL> — Задание свойств одного или более столбцов;
- <TR> — Для обрамления рядов таблицы;
- <TD> — Для обрамления клеток
- <TH> — </TH> тех, что нужно показывать пожирнее, например заголовков;
- <TD> — </TD> обычных.
Далее представлены ранее использовавшиеся атрибуты формирования таблиц html.
Ознакомиться с современными методами форматирования таблиц в соответствии с современным стандартом HTML5 можно на странице Таблицы HTML
Атрибуты TABLE:
| имя атрибута | возможные значения | смысл | примечания |
| ALIGN | LEFT, RIGHT | Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR. | LEFT — Таблица прижимается влево (используется по умолчанию). RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево. |
| VALIGN | TOP, MIDDLE, BOTTOM | Определяет вертикальное расположение текста в таблице | |
| WIDTH | целое | Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента. | броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце |
| HEIGHT | целое | Определяет высоту таблицы в пикселах или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран. | броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке |
| BACKGROUND | URL | Задает в качестве фона графический файл. | |
| BGCOLOR | Задает цвет фона. | ||
| BORDER | целое | Ширина рамки в пикселах | По умолчанию рамка не рисуется |
| BORDER COLOR | Задание цвета рамки | ||
| BORDER COLORLIGHT | Задание цвета для рамки с тенью (псевдо трехмерная графика) | Используется вместе с атрибутами BORDERCOLORDARK и BORDER | |
| BORDER COLORDARK | Задание цвета для рамки с тенью (псевдо трехмерная графика | ||
| CELLPADDING | целое | Задает расстояние в пикселах между границей клетки и ее содержимым. | |
| CELLSPACING | целое | Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы. | |
| COLS | целое | Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц | |
| FRAME | VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER | Определяет метод отрисовки рамки | VOID — Убрать наружную часть рамки. ABOVE — Показывает верхнюю границу таблицы. BELOW — Показывает нижнюю границу таблицы. HSIDES — Показывает верхнюю и нижнюю границу таблицы. LHS — Показывает левую границу таблицы. RHS — Показывает правую границу таблицы. VSIDES — Показывает левую и правую границу таблицы. BOX — Показывает полную рамку таблицы. BORDER — Показывает полную рамку таблицы. |
| RULES | NONE, GROUPS, ROWS, COLS, ALL | Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы | NONE — Устраняет все границы внутри таблицы. GROUPS — Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP ROWS – Показывает горизонтальные границы между всеми рядами таблицы. COLS – Показывает вертикальные границы между всеми колонками таблицы. ALL — Показывает все границы. |
Атрибуты TD, TH:
| имя атрибута | возможные значения | смысл | примечания |
| NOWRAP | подавляет перенос слов | эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки | |
| ROWSPAN | целое | число строк, перекрываемых ячейкой | по умолчанию 1 |
| COLSPAN | целое | число столбцов, перекрываемых ячейкой | по умолчанию 1 |
| COLSPEC | ширина колонок в символах или в процентах | например COLSPEC=»20%» | |
| ALIGN | LEFT, CENTER, RIGHT, JUSTIFY, CHAR | горизонтальное выравнивание данных в ячейке | по умолчанию LEFT или атрибут ALIGN во включающем элементе TR, Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать. Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа |
| VALIGN | TOP, MIDDLE, BOTTOM, BASELINE | вертикальное выравнивание данных в ячейке | перекрывается атрибутом VALIGN во включающем элементе TR |
| WIDTH | целое | ширина ячейки в пикселях | броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце |
| HEIGHT | целое | высота ячейки в пикселях | броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке |
| BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK | Аналогично атрибутам TABLE | ||
Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH
Пример:
Потребление пива сотрудниками вневедомственной охраны пивзавода
| Ф.И.О | литров | сорт |
|---|---|---|
| Иванов Иван Иванович | 133 | Хейнекен |
<TABLE> <CAPTION>потребление пива сотрудниками вневедомственной охраны пивзавода</CAPTION> <TR><TH>Ф.И.О</TH> <TH>литров</TH> <TH>сорт</TH> </TR> <TR><TD> Иванов Иван Иванович </TD> <TD ALIGN=CENTER >133</TD> <TD>Хейнекен</TD> </TR> </TABLE>
Атрибуты <TABLE>:
BORDER=2 — Ширина рамки в пикселях
ALIGN=CENTER
CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы
CELLSPACING=5 – расстояние между ячейками таблицы
WIDTH=»50%» — ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах
COLS=4 –Количество столбов в таблице
Клетка может занимать несколько строк или столбцов. Для этого используются атрибуты ROWSPAN или COLSPAN в теге <TH> или <TD>. Для задания ширины таблицы или колонки используется атрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:
образец таблицы
| средний | повышенная пушистость | ||
| рост | вес | ||
| самцы | 29см | 6.2кГ | 40% |
| самки | 25см | 4.9кГ | 43% |
<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 > <CAPTION><I>образец таблицы</I></CAPTION> <TR><TH ROWSPAN="2"></TH> <TH COLSPAN="2">средний</TH> <TH ROWSPAN="2">повышенная <BR>пушистость</TH> </TR> <TR><TH>рост</TH> <TH>вес</TH> </TR> <TR><TH>самцы</TH> <TD>29см</TD> <TD>6.2кГ</TD> <TD>40%</TD> </TR> </TABLE></CENTER>
<COL>
<COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >
Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, «сильнее» параметров команды COLGROUP.
<COLGROUP>
Свойства, заданные командой COLGROUP, переопределяются комндой COL. Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.
<COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n — Задание числа последовательных столбцов.>
Пример :
<TABLE> <COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT> <TBODY> <TR> <TD>This column is in the first group and is right-aligned</TD> <TD>This column is in the second group and is left-aligned</TD> <TD>This column is in the second group and is left-aligned</TD> </TR> </TABLE>
Пример :
<TABLE> <COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT> <COLGROUP><COL ALIGN=CENTER> <TBODY> <TR> <TD>This is the first column in the group and is right-aligned.</TD> <TD>This is the second column in the group and is left-aligned.</TD> <TD>This column is in a new group and is centered.</TD> </TR> </TABLE>
Практически все атрибуты табличных тегов считаются устаревшими.
Таблицы HTML – валидное оформление таблиц по стандарту HTML5.
Читать дальше: Фреймы в HTML
htmlweb.ru