Как создать таблицу для сайта html и css
- Подробности
- Категория: HTML - при создании сайтов
- Просмотров: 2153
Часто для наглядности на сайте требуется создать таблицу, но как некоторые не знают...для них и будет эта статья, хотя и для бывалых, тоже кое-что найдется...
Как создать таблицу в HTML ?
Вот примерный код:
1.
<table>
<caption align="bottom">
Таблица для примера
</caption>
<colgroup>
<col id="1col" />
<col id="2col" />
<col id="3col" />
</colgroup>
<thead>
<tr>
<th scope="col">Заголовок 1 колонки</th>
<th scope="col">Заголовок 2 колонки</th>
<th scope="col">Заголовок 3 колонки</th>
</tr>
</thead>
<tbody>
<tr>
<td>ячейка таблицы1</td>
<td>ячейка таблицы2</td>
<td>ячейка таблицы3</td>
</tr>
<tr>
<td>ячейка таблицы4</td>
<td>ячейка таблицы5</td>
<td>ячейка таблицы6l</td>
</tr>
</tbody>
</table>
А вот, что получается:
Заголовок 1 колонки | Заголовок 2 колонки | Заголовок 3 колонки |
---|---|---|
ячейка таблицы1 | ячейка таблицы2 | ячейка таблицы3 |
ячейка таблицы4 | ячейка таблицы5 | ячейка таблицы6 |
Как видим стили моего сайта понаделали много изменений и не все выглядит приглядно(если честно), но давайте рассмотрим поближе теги:
- тег <table> - необходим для создания таблицы - основной; (все теги в таблице парные(кроме col) и имеют закрывающийся тег, в данном случае </table> )
- <caption>, <colgroup>, <col>, <thead> - редко используются, однако находят свое применение при редактировании стилей таблицы.
- зачастую можно обойтись тегами table, th, tr и td - как обычно и происходит.
2. Таблица у нас получилась не очень, верно? Если у вас такая же ерунда, то у вас видимо тоже сайт запичкан готовыми свойствами css и у вас скорее всего популярный движок - зачастую в таких движках, уже предустановлены стили для таблиц, и вот мы видим, что для моего шаблона - установлены также безобразные стили. Давайте разбираться тут - стили css для таблицы на сайте
Также по теме:
- как раньше создавалась таблица для сайта (более старые правила)
Еще интересное: