Как правильно добавить заголовок таблице?

0 / 5

Автор: Администратор

22.07.2015

Теги: css, html, table, style, caption

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

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

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

Сам же <caption> помещается внутри таблицы, вот как это выглядит в коде:

<table>
	<caption>Таблица №1. Заголовок таблицы</caption>
	<tr>
		<th>Заголовок 1 столбца</th>
		<th>Заголовок 2 столбца</th>
		<th>Заголовок 3 столбца</th>
	</tr>
	<tr>
		<td>1 текст 1 столбца</td>
		<td>1 текст 2 столбца</td>
		<td>1 текст 3 столбца</td>
	</tr>
	<tr>
		<td>2 текст 1 столбца</td>
		<td>2 текст 2 столбца</td>
		<td>2 текст 3 столбца</td>
	</tr>
</table>

Стоит только добавить немного стилей к этому:

table{border-collapse:inherit;border:1px solid #792b00;width:100%}
table caption{font-family:Georgia, "Times New Roman", Times, serif;text-align:right;font-style:italic;color:#666}
table th{background:none repeat scroll 0 0 #ff9459;color:#fff;text-align:left;border:none;padding:4px}
table td{border:none;padding:4px}

И получится вот такая, миленькая таблица:

Таблица №1. Заголовок таблицы
Заголовок 1 столбца	Заголовок 2 столбца	Заголовок 3 столбца
1 текст 1 столбца	1 текст 2 столбца	1 текст 3 столбца
2 текст 1 столбца	2 текст 2 столбца	2 текст 3 столбца

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

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15670

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10630

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3959

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6113