Главные новости

Свойства таблиц и их ячеек на примерах

Свойства таблиц и их ячеек на примерах

Данный урок обучит установке размеров таблиц, выравниванию их по вертикали и горизонтали (содержимого). Обучит определять заголовок таблицы.

Ширина ячейки, высота и их атрибуты

<html>
<head>
<title>Ширина ячейки, высота и их атрибуты</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, второй рядок
 

атребут width="200" отвечает за ширину, height="100" отвечает за высоту ячейки. Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда).

Горизонтальное выравнивание в таблице и в ячейке текста. Текст слева, справа, по центру, ширине ячеек таблицы.

<html>
<head>
<title>Горизонтальное выравнивание в таблице и в ячейке текста. Текст слева, справа, по центру ячеек таблицы:</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tbody>
<tr height="100">
<td align="left">ячейка 1 </td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
<td align="justify">ячейка 4</div></td>
</tr>
</tbody>
</table>
</body>
</html>

Результат:

ячейка 1 ячейка 2 ячейка 3 ячейка 4

В данном примере происходит выравнивание ячеек по горизонтали а именно 1я ячейка по левому краю align="left", 2я по правому align="right", 3я по центру align="center" и 4я по ширине align="justify". Это выравнивание по горизонтали если вы запоните 4 ячейки то сможите увидеть отличие каждой из них.

Вертикальное выравнивание текста внутри таблицы. Текст вверху, внизу, по центру, базовой линии ячеек таблицы:

<html>
<head>
<title>Вертикальное выравнивание текста внутри таблицы. Текст вверху, внизу, по центру ячеек таблицы:</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>
<td valign="baseline">ячейка 4</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1 ячейка 2 ячейка 3 ячейка 4
 

Атрибут 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><br>
   <table align="left" width="220" height="220" bgcolor="#cc0000">
   <tr>
   <td>
   <p>align="left"</p>
   </td>
   </tr>
   </table><br>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html>

Результат: 

align="center"

 

align="left"

 

align="right"

 

 

 

 

 

 

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor  атрибут определяет цвет фона.

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="150" height="100"> &nbsp; </td>
<td width="150" align="center">
    <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>
 

Результат: 

 
   
   
 

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

Если хотите увидеть примеры более точно чем показано здесь то создайте у себя на компьютере страницу и копируйте туда по одному уроку и после сохранения откройте ее и увидете результат. В данном случае некоторые параметры css моего шаблона не позволяют увидеть результаты некоторые более четко чем есть.