Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

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

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

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

Тег таблицы:

<table></table>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <tbody></tbody>

  3. Пример таблицы с одним столбцом

    Первую таблицу html сделаем по всем правилам! С использованием tbody:

    <table> 

        <tbody>

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

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

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

        </tbody> 

    </table>

    Результат вывода таблицы на экран без столбцов

    Из ниже идущего примера таблицы... мы ничего не можем понять, просто какие-то строки расположились друг над другом... для того, чтобы увидеть таблицу и ее границы, нужно добавить, свойство бордюра...
    Строка 1
    Строка 2
    Строка 3

  4. Как увидеть таблицу 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

  5. Пример таблицы 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

  6. Пример таблицы 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

  7. Плюсы и минусы таблиц html

    Плюсы таблицы html в том, что у таблицы жесткий каркас, если определены границы и ширины столбцов, то это замечательным инструмент для оформления соответствующих данных! Однозначно выигрывают у дивов(div)

    Что можно отнести к минусам таблицы!?

    Я бы отнес к недостаткам - большое количество тегов,

    + однозначным минус использование для верстки, я раньше, кроме таблицы для верстки ничего и не использовал, но со временем все равно перешел на слои div


Последняя дата редактирования : 2020-11-26 20:39
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.