| Вертикальная ориентация текста в таблице html |
(Для справки) Существуюn теги <th> </th>, которые определяют заголовок таблицы - они делают текст, написанный между ними, жирного шрифта.
Для того что бы текст внутри ячейки таблицы был прижат к верху, низу или середине ячейки существуют атрибуты:
• valign="top"
• valign="bottom"
• valign="middle"
Для демонстрации работы данных атрибутов создадим таблицу. Зададим ей длину, а высоту "обозначим" внутри ряда (<tr>):
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12" width="500">
<tr>
<th align="center" >Вверху</th> <th align="center" >У середины</th>
<th align="center" >Внизу</th>
</tr>
<tr height="100">
<td valign="top">слово</td>
<td valign="middle" >слово</td>
<td valign="bottom" >слово</td>
</tr>
</table>
</body>
</html>
| Вверху | У середины | Внизу |
| слово |
слово |
слово |
| Горизонтальная ориентация текста в таблице html |
Для горизонтальной ориентации текста в таблице применяют атрибуты
• align="left"
• align="right"
• align="center"
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12" width="500">
<tr>
<th align="center" >Слева</th> <th align="center" >По центру</th>
<th align="center" >Справа</th>
</tr>
<tr height="100">
<td align="left">слово</td>
<td align="center" >слово</td>
<td align="right" >слово</td>
</tr>
</table>
</body>
</html>
| Слева | По центру | Справа |
| слово |
слово |
слово |
| Горизонтальная ориентация текста в таблице html |
Задавая определённое выравнивание текста в ячейке таблицы, можно одновременно вертикальные и горизонтальные параметры.
Ниже представлен пример, который наглядно демонстрирует это:
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="500">
<tr>
<th align="center" >Слева</th> <th align="center" >По центру</th>
<th align="center" >Справа</th>
</tr>
<tr height="100">
<td valign="top" align="left">Ячейка (1.1)</td>
<td valign="top" align="center">Ячейка (1.2)</td>
<td valign="top" align="right"> Ячейка (1.3)</td>
</tr>
<tr height="100">
<td valign="middle" align="left" > Ячейка (2.1)</td>
<td valign="middle" align="center"> Ячейка (2.2)</td>
<td valign="middle" align="right" > Ячейка (2.3)</td>
</tr>
<tr height="100">
<td valign="bottom" align="left"> Ячейка (3.1)</td>
<td valign="bottom" align="center"> Ячейка (2.3)</td>
<td valign="bottom" align="right"> Ячейка (3.3)</td>
</tr>
</table>
</body>
</html>
| Слева | По центру | Справа |
| Ячейка (1.1) |
Ячейка (1.2) |
Ячейка (1.3) |
| Ячейка (2.1) |
Ячейка (2.2) |
Ячейка (2.3) |
| Ячейка (3.1) |
Ячейка (2.3) |
Ячейка (3.3) |
