HTML+CSS Создание таблиц

Уроки HTML+CSS: Создание таблицы

В данном уроке мы с вами разберем, как добавить таблицу на свой сайт. Структура у таблицы прописывается вручную, вам придется прописывать каждую строчку и каждый столбик. У многих кто первый раз сталкивается с таблицей, возникают трудности в понимание структуры, так как здесь используются несколько тегов. Давайте все по порядку.

Создание таблицы

Главным тегом является тег <table></table>, внутри него будут располагаться теги определяющие структуру таблицы.

<tr></tr> – создает строку, в которую записываются элементы.

<td></td> – создает ячейку, в которую можно записать информацию.

<th></th> – определяет заголовок столбца, который обычно записал в первой строке таблицы.

По началу все кажется не совсем понятным, но давайте посмотри на пример.

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <!--ряд с ячейками заголовков-->
<tr><td>Пример текста</td><td>Пример текста</td></tr> <!--ряд с ячейками тела таблицы-->
</table>

Заголовок 1 Заголовок 2
Пример текста Пример текста

Как видно в примере я создал строку(ряд) <tr></tr>. В первой строке я поместил 2 заголовка <th></th>. Получилось <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>.

Во второй строке я сделал тоже самое, только заменили заголовки на обычные ячейки, в которые можно записать информацию. И получилось <tr><td>Пример текста</td><td>Пример текста</td></tr>.

Чтобы создавать правильные, симметричные таблицы, вам нужно в каждом ряду указывать одинаковое число ячеек(<td> или <th>).

Вот что получится если вы укажите разное количество ячеек.Групировка

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Текст 1</td><td>Текст 2</td><td>Текст 3</td></tr>
</table>

Заголовок 1 Заголовок 2
Текст 1 Текст 2 Текст 3

В данном примере я добавил 3 ячейку во второй строке.

В принципе это все что нужно знать для создания таблиц. Но помимо предложенных тегов, есть ещё теги которые используются для разделения таблицы на определенные части. Эти теги мы разберем, когда будем изучать CSS.

Оставить комментарий

avatar
  Подписаться  
Уведомление о