CSS: свойство caption-side

Технические моменты создания сайтов и других Web-приложений.

CSS: свойство caption-side

Сообщение Александр » 25 сен 2013, 16:29

Данное свойство определяет положение заголовка по отношению к таблице. Оно определяет, до или после таблицы должен показываться заголовок. Может принимать значения: Top и Bottom, а в CSS 3 еще и left и right. Последние два работают только в браузерах Firefox.
Пример использования:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Свойство caption-side</title>
  <style>
    table {
     width: 100%; /* Ширина таблицы */
    }
    td {
     border: 2px dashed gray; /* Параметры границы */
     padding: 11px; /* Отступ в ячейке */
    }
    caption {
     caption-side: top; /* Заголовок над таблицей */
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Оценки в школе</caption>
    <tr>
     <td>Математика</td>
     <td>4</td><td>3</td>
     <td>2</td><td>3</td>
    </tr>
    <tr>
     <td>Биология</td>
     <td>3</td><td>5</td><td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Русский язык</td><td>3</td><td>4</td>
     <td>4</td>
     <td>2</td>
    </tr>
    <tr>
     <td>Химия</td><td>3</td>
     <td>5</td>
     <td>2</td>
     <td>5</td>
    </tr>
   </table>
 </body>
</html>

Полученный результат:
bc.png
Заголовок над таблицей
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3