HTML таблица или таблицы в HTML MEIN ARBEIT
   

HTML таблица или таблицы в HTML

Дата: 25/10/2014

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

Создаём таблицу в HTML

Таблица создаётся при помощи тега <table> и закрывающим тегом </table>. Это основной каркас таблицы. Строки в ней создаются тегом <tr> и закрывающим </tr>. А ячейки в таблице создаются тегом <td> и закрывающим </td>. Зная эти теги, можно создать простую таблицу.
<document HTML>
<html>
<head>
<title> Простая таблица </title>
</head>
<body>
<table> - таблица.
<tr> - первая строка
<td> - первая ячейка в первой строке.
</td>
<td> - вторая ячейка в первой строке
</td>
<td> - третья ячейка в первой строке.
</td>
</tr> - закрывающий тег первой строки

<tr> - вторая строка
<td> - первая ячейка во второй строке.
</td>
<td> - вторая ячейка во второй строке
</td>
<td> - третья ячейка во второй строке.
</td>
</tr> - закрывающий тег второй строки

<tr> - третья строка
<td> - первая ячейка в третьей строке.
</td>
<td> - вторая ячейка в третьей строке
</td>
<td> - третья ячейка в третьей строке.
</td>
</tr> - закрывающий тег третьей строки

</table>
</body>
</html>

Как видите, у нас получилась таблица из девяти ячеек - три на три. А теперь попробуйте сами изменить их формат при помощи атрибутов height - высота, width - ширина. Напоминаю, что в параметрах этих атрибутов можно использовать процентные и пиксельные значения! Попробовали? Получилось? Хорошо! Если нет, вот вам шаблон резиновой таблицы!

Пример: резиновая таблица в HTML


<document HTML>
<html>
<head>
<title> Шаблон резиновой таблицы </title>
</head>
<body>
<table height="100%" width="100%" border="1"> - таблица шириной и высотой 100 процентов, то есть на весь экран атрибут border, равный единице, будет показывать все линии.
<tr height="20%" width="100%"> - первая строка высотой в 20% и шириной в 100%.
<td height="20%" width="0%" > - первая ячейка в первой строке практически нами убрана для удобства заголовка.
</td>
<td height="20%" width="100%"> - вторая ячейка в первой строке расширена нами для заголовка или баннера.
</td>
<td height="20%" width="0%"> - третью ячейку в первой строке убрали, как и первую.
</td>
</tr> - закрывающий тег первой строки

<tr height="60%" width="100%"> - вторая строка, растянутая по высоте на 60% и по ширине на 100%
<td height="60%" width="20%"> - первая ячейка во второй строке, растянутая по высоте на 60% и зауженная слева на 20%.
</td>
<td height="60%" width="60%"> - вторая ячейка во второй строке растянута посередине.
</td>
<td height="60%" width="20%"> - третья ячейка во второй строке растянута по высоте строки и сужена справа на 20%..
</td>
</tr> - закрывающий тег второй строки

<tr height="20%" width="100%"> - третья строка снизу высотой в 20% и шириной в 100%.
<td height="20%" width="30%"> - первая ячейка в третьей строке слева сужена на 30% по ширине и на 20% по высоте, как сама строка..
</td>
<td height="20%" width="40%"> - вторая ячейка в третьей строке. Ячейка посередине снизу с параметрами по высоте строки и по ширине в 40%.
</td>
<td height="20%" width="30%"> - третья ячейка в третьей строке. Эта ячейка похожа, как близнец на свою соседку слева.
</td>
</tr> - закрывающий тег третьей строки

</table>
</body>
</html>

Этот пример очень наглядно показывает особенность управления таблицей в HTML. Вы заметили, что самой таблице я задал значение 100%, а уже потом разрезал её на строки и ячейки - на равные части, которые в сумме дают 100%, как по высоте, так и по ширине. Вы спросите меня, можно задавать разные параметры, которые бы не давали в сумме 100%? Прошу вас не полениться и, скопировав этот шаблон в свой HTML-файл, проверить самостоятельно, что получается! Простите, немного отвлёкся от темы, в которой я вам продемонстрировал, как можно делать разметку при помощи таблицы. Таблицы бывают разные, но основу управления строками и ячейками я вам показал, поэтому дерзайте и верстайте web-странички, в основу закладывая разметку из бесцветных таблиц. Так будет проще размещать ваш контент, как текстовый, так и графический. Поверьте моему опыту! В заключении этой статьи хочу сказать, что управлять таблицами через HTML немного сложновато, потому что надо отслеживать все параметры таблицы - её ячеек и строк, поэтому для облегчения этой задачи были придуманы каскадные таблицы, то есть CSS, где управление можно заключить в один файл, и потом легко менять параметры любой таблицы. Про CSS я вам поведую позже, а пока я продолжу описывать работу в HTML, и следующая статья по этой теме будет Блоки DIV в HTML.

С уважением, Администратор!


предыдущая следующая
Список статей по теме...




   
Бесплатный Хостинг Яндекс.Метрика