HTML-таблицы по центру, слева, справа

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

В прошлом у тега <TABLE> имелся атрибут align, с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры — неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style.

 

<table style="margin:0 auto 0 0">...</table> — Таблица располагается слева. Это значение по умолчанию.

<table style="margin:0 0 0 auto">...</table> — Расположение таблицы справа.

<table style="margin:0 auto 0 auto">...</table> — HTML-таблица по центру.

 

Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style="margin:сверху справа снизу слева". Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой — все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.

И самое главное — не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке».

 

Пример расположения таблицы по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>HTML. Таблица по центру</title>

</head>

<body>

<table style="margin:0 auto 0 auto">

<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>

<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>

</table>

</body>

</html>

 

Результат в браузере








Дата добавления: 2015-12-11; просмотров: 2710; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ


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

При помощи поиска вы сможете найти нужную вам информацию, введите в поисковое поле ключевые слова и изучайте нужную вам информацию.

Поделитесь с друзьями:

Если вам понравился данный ресурс вы можете рассказать о нем друзьям. Сделать это можно через соц. кнопки выше.
helpiks.org - Хелпикс.Орг - 2014-2021 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.006 сек.