Генерирование заголовков для таблицы

Posted on Сентябрь 23, 2007
Filed Under table, caption, generated content, css |

Исходный HTML код таблицы:<table summary="Значение атрибута summary" title="Значение атрибута title">
<tr>
<td>Пример </td>
<td>Таблицы</td>
</tr>
</table>

CSS:table[summary]:after {
content: "Таблица " counter(table) ": " attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}

Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который и будет считать номер таблицы на странице. Следующим шагом задаем display: table-caption; для нашего сгенерированного контента, чтобы он отображался как заголовок.

caption-side: top; определяет положение заголовка относительно таблицы.

Думаю что использовать это повсеместно не имеет смысла,так как это поддерживаться не всеми браузерами, но как какая то “фитча”, для пользователей например opera, это использовать можно).

пример
источник

Comments

2 Responses to “Генерирование заголовков для таблицы”

  1. mishaspb on Ноябрь 12th, 2007 3:27 pm

    слово “таблицЫ” пишется через Ы ;)
    а за статьи по css спасибо большое ;)

  2. never again on Ноябрь 12th, 2007 3:38 pm
    спасибо, поправил!

Leave a Reply




Please copy the string 0PUoYT to the field below: