Сделать таблицу html из чего состоит таблица теги примеры
Таблица html, теги таблицы, из чего состоит таблица, примеры таблиц, что такое таблица html, плюсы и минусы таблиц html !
Тег таблицы:
Всё о таблицах html теги состав таблиц
- Что такое таблица html
- Теги таблицы html, строка, столбец
- Пример таблицы с одним столбцом
- Как увидеть таблицу html на странице
- Пример таблицы html с двумя столбцами
- Пример таблицы html с тремя столбцами
- Плюсы и минусы таблиц html
- Ещё больше о таблицах
Что такое таблица html
Таблица html представляет собой некую сетку ячеек, с содержимым. Таблицы html в web-е долго использовались для верстки страниц, пока на смену им не пришли слои.
Никто не запрещает использовать сегодня таблицы в верстке страницы, но как мне кажется - это не совсем удобно.
Сегодня таблицы html на страницах сайтов используются в основном, где таблицы использовать не только уместно, но и нужно! Списки, рейтинги, и т.д.
Из чего состоит таблица html
Таблица состоит из нескольких элементов, основной обрамляющий тег table, тег строки tr и тег столбца td (можно использовать еще тег th, но я как-то привык везде использовать td)Теги таблицы html, строка, столбец
Как уже было выше сказано обрамляющий двойной тег таблицы html обознается tableТег строки таблицы html
Тег строки также как и тег таблицы является двойным тегом и обозначается двумя буквами trТег столбца таблицы html
Тег столбца таблицы html тоже двойной тег и обозначается двумя буквами tdТег tbody таблицы html
Вообще по правилам, внутри таблицы html должен быть еще один двойной тег "tbody" - но если честно я его никогда не использовал... браузер сам допишет!
Пример таблицы с одним столбцом
Первую таблицу html сделаем по всем правилам! С использованием tbody:
<table>
<tbody>
<tr><td>Строка 1</td></tr>
<tr><td>Строка 2</td></tr>
<tr><td>Строка 3</td></tr>
</tbody>
</table>
Результат вывода таблицы на экран без столбцов
Из ниже идущего примера таблицы... мы ничего не можем понять, просто какие-то строки расположились друг над другом... для того, чтобы увидеть таблицу и ее границы, нужно добавить, свойство бордюра...Строка 1 |
Строка 2 |
Строка 3 |
Как увидеть таблицу html на странице
Для того, чтобы увидеть вашу таблицу на странице, самое простое - это добавить border, мы подробно рассматривали вопрос границы таблицы - там мы перебрали, наверное все возможные вариации!Добавляем к выше приведенной таблице:
Наша таблица должна выглядеть так:
<tr><td>Строка 1 </td></tr>
<tr><td>Строка 2 </td></tr>
<tr><td>Строка 3 </td></tr>
</table>
Результат вывода таблицы:
Строка 1 |
Строка 2 |
Строка 3 |
Пример таблицы html с двумя столбцами
Теперь добавим второй столбец к ранее уже существующему и у нас получится таблица с двмя столбцами:
<tr>
<td>Строка 1 - первого столбца</td>
<td>Строка 1 - второго столбца</td>
</tr>
<tr>
<td>Строка 2 </td>
<td>Строка 2 </td>
</tr>
<tr>
<td>Строка 3 </td>
<td>Строка 3 </td>
</tr>
</table>Результат вывода таблицы с двумя столбцами:
Что мы можем наблюдать из ниже приведенной таблицы!? Что ширина таблицы подстраивается под содержимое столбцов!Строка 1 - первого столбца | Строка 1 - второго столбца |
Строка 2 | Строка 2 |
Строка 3 | Строка 3 |
Пример таблицы html с тремя столбцами
Ну и рассмотрим последний пример - таблица html с треям столбцами, все аналогично таблицам, что были приведены выше, лишь добавляем к таблице третий столбец!
<tr>
<td>Строка 1 - первого столбца</td>
<td>Строка 1 - второго столбца</td>
<td>Строка 1 - третьего столбца</td>
</tr>
<tr>
<td>Строка 2 </td>
<td>Строка 2 </td>
<td>Строка 2 </td>
</tr>
<tr>
<td>Строка 3 </td>
<td>Строка 3 </td>
<td>Строка 3 </td>
</tr>
</table>Результат вывода таблицы с тремя столбцами:
Строка 1 - первого столбца | Строка 1 - второго столбца | Строка 1 - третьего столбца |
Строка 2 | Строка 2 | Строка 2 |
Строка 3 | Строка 3 | Строка 3 |
Плюсы и минусы таблиц html
Плюсы таблицы html в том, что у таблицы жесткий каркас, если определены границы и ширины столбцов, то это замечательным инструмент для оформления соответствующих данных! Однозначно выигрывают у дивов(div)
Что можно отнести к минусам таблицы!?
Я бы отнес к недостаткам - большое количество тегов,
+ однозначным минус использование для верстки, я раньше, кроме таблицы для верстки ничего и не использовал, но со временем все равно перешел на слои divтаблица html ячейки таблицы html как сделать таблицу в html теги html таблица html код таблицы строка таблицы html текст в таблице html таблица html css таблицы html примеры создание таблицы в html ширина таблицы html html страница таблица таблица по центру html html столбцы таблицы как вставить таблицу в html как создать таблицу в html таблица в блокноте html