- Заработок без сайта
- Заработок на сайте
- Раскрутка сайта
- Темная раскрутка
- Рефералы
- Лохотроны
- Черный список
- Архив
- Домены
- Таблицы стилей CSS
- Контакты
- Ссылки
- Статьи
- Вводная
- Учимся раскрашивать
- Выравнивание текста
- Заголовки и выделение текста
- Шрифты в Html
- Вставляем картинки
- Картинки и текст в Html
- Текстовые ссылки
- Картинка как ссылка
- Навигационные карты
- Якоря
- Таблицы
- Выравнивание текста в таблицах
- Объединяем ячейки
- Расстояние между ячейками таблицы
- Вложенные таблицы
- Примеры с использованием таблиц
- Фреймы
- Полоса прокрутки во фреймах
- Плавающий фрейм
- Списки в документах Html
- Спецсимволы в документах html
- Линии в документах Html
- МЕТА теги
- Список основных тегов
- Таблица цветов
HTML
Начинающим
Выравнивание текста в таблицах
Внутри таблиц действуют все теги форматирования текста и шрифтов. В качестве примера возьмем таблицу из прошлого урока и добавим в нее теги форматирования текста.
|
<table border="3" width="400" height="200">
<tr bgcolor="#CCCCFF" align="center"> <td> 1х1 </td> <td> 1х2 </td> <td> 1х3 </td> </tr> <tr> <td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td> <td> <p align="Center"> 2х2 </p> </td> <td bgcolor="#FFCCFF"> <div align="Center"> 2х3 </div> </td> </tr> <tr> <td bgcolor="#FFCCFF"> <center> 3х1 </center> </td> <td> <center> 3х2 </center> </td> <td bgcolor="#CCFFCC"> <center> 3х3 </center> </td> </tr> <tr bgcolor="#00FFFF"> <td align="center"> 4х1 </td> <td align="center"> 4х2 </td> <td align="center"> 4х3 </td> </tr> </table> |
В окне браузера таблица будет выглядеть так:
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
Как видите кроме тега <center> также можно прописать атрибут align для ячеек
<td> или для целого ряда ячеек <tr> таблицы .
Атрибут align может принимать еще значения right и left. То есть содержимое
ячейки будет выровнено по правому краю или по левому соответственно.
Значение justify при употреблении с тэгами <td>, <tr>, <table>,
атрибут align принимать не может.
Также для форматирования содержимого внутри ячеек можно при помощи тегов <p>
и <div>
Все это видно из выше изложенного примера, я задал центрирование текста внутри
таблицы разными способами, а результат получился одинаковый для всех строк и
столбцов данной таблицы.
По умолчанию таблица целиком выравнивается по левому краю, для изменения положения
таблицы в окне браузера для тега <table> прописывается атрибут align которому
можно присвоить значения: center, right и left.
|
<table border="3" width="400" height="200" align="center">
<tr bgcolor="#CCCCFF" align="center"> <td> 1х1 </td> <td> 1х2 </td> <td> 1х3 </td> </tr> <tr> <td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td> <td> <p align="Center"> 2х2 </p> </td> <td bgcolor="#FFCCFF"> <div align="Center"> 2х3 </div> </td> </tr> <tr> <td bgcolor="#FFCCFF"> <center> 3х1 </center> </td> <td> <center> 3х2 </center> </td> <td bgcolor="#CCFFCC"> <center> 3х3 </center> </td> </tr> <tr bgcolor="#00FFFF"> <td align="center"> 4х1 </td> <td align="center"> 4х2 </td> <td align="center"> 4х3 </td> </tr> </table> |
В итоге таблица будет выровнена по центру.
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
Выровнять содержимое внутри таблицы можно не только по горизонтали, но и по вертикали при помощи атрибута valign может принимать значения:
- middle - содержимое будет находится в середине.
- top - содержимое будет находится вверху ячейки.
- bottom - содержимое будет находится внизу ячейки.
Атрибут valign может прописываться для тегов <td> - для одной ячейки, <tr> - для ряда ячеек и <table> - для таблицы в целом.
|
<table border="3" width="400" height="200" align="center">
<tr bgcolor="#CCCCFF" align="center"> <td valign="bottom"> 1х1 </td> <td valign="top"> 1х2 </td> <td valign="bottom"> 1х3 </td> </tr> <tr> <td bgcolor="#CCFFCC" valign="top"> <div align="Center"> 2х1 </div> </td> <td> <p align="Center"> 2х2 </p> </td> <td bgcolor="#FFCCFF" valign="top"> <div align="Center"> 2х3 </div> </td> </tr> <tr> <td bgcolor="#FFCCFF" valign="bottom"> <center> 3х1 </center> </td> <td> <center> 3х2 </center> </td> <td bgcolor="#CCFFCC" valign="bottom"> <center> 3х3 </center> </td> </tr> <tr bgcolor="#00FFFF" valign="bottom"> <td align="center"> 4х1 </td> <td align="center"> 4х2 </td> <td align="center"> 4х3 </td> </tr> </table> |
В окне браузера таблица или вернее сказать содержимое таблицы будет выглядеть так:
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
| Вернуться назад | Перейти к следующей странице |
|---|