HTML таблица по центру
HTML таблицы, ячейки, заголовок
HTML таблица, примеры таблицы, ширина ячейки
или свойства HTML таблицы и ячеек на примерах
Продолжаем изучать HTML таблицы. Текущий урок научит вас устанавливать размер таблицы, выравнивать по вертикали и по горизонтали ее содержимое, точнее содержимое ячеек. Также вы узнаете как определить заголовк HTML таблицы.
Навигация по странице
-
HTML ширина ячейки таблицы и ее высота, размер
-
Вертикальное HTML выравнивание в таблице
-
Горизонтальное HTML выравнивание в таблице
-
HTML заголовок таблицы, заголовок в ячейке
-
HTML таблица по центру, с левой, с правой стороны
-
HTML таблица внутри ячейки другой таблицы
HTML ширина ячейки таблицы и ее высота (размер ячеек)
HTML высота ячеек и их ширина, размер определяется следующими атрибутами:
<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td width="200" height="100">ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html> |
Результат:
ячейка 1, первый ряд |
ячейка 2, первый ряд |
ячейка 1, второй ряд |
ячейка 2, второй ряд |
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td align="left">ячейка 1</td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
</tr>
</table>
</body>
</html> |
Результат:
ячейка 1 |
ячейка 2 |
ячейка 3 |
Вертикальное выравнивание текста внутри HTML таблицы
HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td valign="top">ячейка 1</td>
<td valign="bottom">ячейка 2</td>
<td valign="middle">ячейка 3</td>
</tr>
</table>
</body>
</html> |
Результат:
ячейка 1 |
ячейка 2 |
ячейка 3 |
Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.
Теги, определяющие заголовок HTML таблицы
HTML заголовки таблицы:
<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
</body>
</html> |
Результат:
Заголовок |
Заголовок |
Заголовок |
Текст |
Текст |
Текст |
Текст |
Текст |
Текст |
Теги <th> </th> определяют заголовок HTML таблицы.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы внутри web-страницы:
<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align="center" width="220" bgcolor="#006699">
<tr height="220">
<td>
<p>align="center"</p>
</td>
</tr>
</table>
<table align="left" width="220" height="220" bgcolor="#cc0000">
<tr>
<td>
<p>align="left"</p>
</td>
</tr>
</table>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html> |
Результат: HTML таблица по центру страницы, слева, справа
В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color.
HTML таблица расположена внутри ячейки
Пример:
<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="150" height="100"> </td>
<td width="150" align="center">
<table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
Результат: HTML таблица внутри ячейки другой таблицы
Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML таблица Примеры HTML таблицы и текст Код HTML таблицы