Сделать таблицу html из чего состоит таблица теги примеры

Поддержи проект!!!

Таблица html, теги таблицы, из чего состоит таблица, примеры таблиц, что такое таблица html, плюсы и минусы таблиц html !

Тег таблицы:

Всё о таблицах html теги состав таблиц

1. Что такое таблица html
2. Теги таблицы html, строка, столбец
3. Пример таблицы с одним столбцом
4. Как увидеть таблицу html на странице
5. Пример таблицы html с двумя столбцами
6. Пример таблицы html с тремя столбцами
7. Плюсы и минусы таблиц html
8. Ещё больше о таблицах

Скопировать ссылку

Что такое таблица html

Таблица html представляет собой некую сетку ячеек, с содержимым. Таблицы html в web-е долго использовались для верстки страниц, пока на смену им не пришли слои.

Никто не запрещает использовать сегодня таблицы в верстке страницы, но как мне кажется - это не совсем удобно.

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

Из чего состоит таблица html

Таблица состоит из нескольких элементов, основной обрамляющий тег table, тег строки tr и тег столбца td (можно использовать еще тег th, но я как-то привык везде использовать td)

Скопировать ссылку

Теги таблицы html, строка, столбец

Как уже было выше сказано обрамляющий двойной тег таблицы html обознается table
<table></table>

Тег строки таблицы html

Тег строки также как и тег таблицы является двойным тегом и обозначается двумя буквами tr
<tr></tr>

Тег столбца таблицы html

Тег столбца таблицы html тоже двойной тег и обозначается двумя буквами td
<td></td>

Тег tbody таблицы html

Вообще по правилам, внутри таблицы html должен быть еще один двойной тег "tbody" - но если честно я его никогда не использовал... браузер сам допишет!

<tbody></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, мы подробно рассматривали вопрос границы таблицы - там мы перебрали, наверное все возможные вариации!


Добавляем к выше приведенной таблице:

border=1

Наша таблица должна выглядеть так:

<table border="1">


     <tr><td>Строка 1 </td></tr>

     <tr><td>Строка 2 </td></tr>

     <tr><td>Строка 3 </td></tr>    

</table>

Результат вывода таблицы:

Строка 1

Строка 2

Строка 3

Скопировать ссылку

Пример таблицы html с двумя столбцами

Теперь добавим второй столбец к ранее уже существующему и у нас получится таблица с двмя столбцами:

<table border="1">

     <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 с треям столбцами, все аналогично таблицам, что были приведены выше, лишь добавляем к таблице третий столбец!

<table border="1">

     <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

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =