Как создать таблицу для сайта html и css

Часто для наглядности на сайте требуется создать таблицу, но как некоторые не знают...для них и будет эта статья, хотя и для бывалых, тоже кое-что найдется...

Как создать таблицу в 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>

А вот, что получается: 

Как видим стили моего сайта понаделали много изменений и не все выглядит приглядно(если честно), но давайте рассмотрим поближе теги:

• тег <table> - необходим для создания таблицы - основной; (все теги в таблице парные(кроме col) и имеют закрывающийся тег, в данном случае </table> )
• <caption>, <colgroup>, <col>, <thead> - редко используются, однако находят свое применение при редактировании стилей таблицы.
• зачастую можно обойтись тегами table, th, tr и td - как обычно и происходит.

 2. Таблица у нас получилась не очень, верно? Если у вас такая же ерунда, то у вас видимо тоже сайт запичкан готовыми свойствами css и у вас скорее всего популярный движок - зачастую в таких движках, уже предустановлены стили для таблиц, и вот мы видим, что для моего шаблона - установлены также безобразные стили. Давайте разбираться тут - стили css для таблицы на сайте

Также по теме:

- как раньше создавалась таблица для сайта (более старые правила)

Еще интересное:

• html палитра