наверх






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


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

<table>


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

<thead>


Элемент <thead> указывает на наличие внутри данного тега заголовков таблицы и располагается в основном сразу после открытия элемента <table>.

<th>


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

<tbody>


Данный элемент устнавливает тело таблицы, внутри которой располагается основная информационная часть.

<tr>


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

<td>


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

В конце хочется показать валидную и правильную структуру таблицы:

<table>
	<thead>
		<tr>
			<th>...</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
		</tr>
	</tbody>
</table>


А вот и соответствующий пример заполненной таблицы:

<table>
	<thead>
		<tr><th>№</th> <th>Страна</th> <th>Население(тыс. человек)</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td> <td>Китай</td> <td>1 338 613,0</td></tr>
		<tr><td>2</td> <td>Индия</td> <td>1 166 079,2</td></tr>
		<tr><td>3</td> <td>США</td> <td>307 212.1</td></tr>
		<tr><td>4</td> <td>Индонезия</td> <td>240 271.5</td></tr>
		<tr><td>5</td> <td>Бразилия</td> <td>198 739.3</td></tr>
	</tbody>
</table>






Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


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