Как сделать таблицу html, php, javascript примеры

И сделаем генератор таблиц в двух языках!

Самая подробная инструкция по созданию таблицы html

1. Что такое таблица html
   
   1. Синтаксис таблицы html
   2. Пример таблицы html
   3. Пример таблицы html с двумя столбцами
   4. Пример таблицы html с тремя столбцами
2. Таблицы html в php
   
   1. Сделать таблицу html в php
   2. Как работает создание таблицы php?
   3. Скачать скрипт создание таблицы php.
3. Сделать таблицу html в javascript
   
   1. Сделать таблицу html в javascript
   2. Как работает создание таблицы javascript?
   3. Вывод кода таблицы javascript.

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

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

   Для того, чтобы понимать, что такое таблица "table" нам придется окунуться в теорию. К сожалению без этого никак...

   Теги бывают разными... у таблицы существует собственный тег таблицы.

   Тег таблицы относится к двойным тегам, т.е. у него есть первый открывающийся тег и второй закрывающий.

   Содержание таблицы находится между открывающим тегом и закрывающим.

   <table>Содержание</table>

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

   Для построения таблицы - одного тега "table" недостаточно! Для таблицы необходимо:

   Тег строки tr

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

   После того, как мы немного разобрались(схематично) из чего должна состоять таблица html ... перейдем конкретно к синтаксису html table :
   
   
   
   
   Скопировать ссылку

   Синтаксис таблицы html

   Перейдем к синтаксису Html таблицы :
   

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

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

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

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

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

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

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

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

   <tbody></tbody>
   
   
   
   Скопировать ссылку

   Пример таблицы html

   После того, как мы разобрались с синтаксисом таблицы - давайте воплотим наши знания в настоящую таблицу html:

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

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

   <table> 

       <tbody>

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

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

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

       </tbody> 

   </table>

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

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

   Строка 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>

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

   Строка 1

   Строка 2

   Строка 3

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

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

   В этом пункте - давайте сделаем таблицу 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






2. Таблицы html в php

   Скачать можно два варианта:

   Старый

   Новый - новый взят из этого пункта в php

   Принципиально - коды создания таблицы в php не отличаются...

   Мне было интересно - как я напишу этот же самый код через... несколько лет...

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

   Сделать таблицу html в php

   Для того, чтобы сделать таблицу вам потребуется :
   

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

   В поле ввода - столбцы наберите требуемое количество столбцов.

   После этого нажмите кнопку Создать таблицу

   Создание таблицы с помощью php

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

   Как работает создание таблицы php?

   Выше приведенный пример создания таблицы в php работает довольно просто:
   

   Нам потребуется форма(form)

   + input с типом "number"

   + submit

   <form action="#example_table2" method="post" class="example_form">
   <input type="number" name="string" min="1" step="1" placeholder=Строки>
   <input type="number" name="column" min="1" step="1" placeholder=Столбцы>
   <input type="submit" name="submit" value="Создать таблицу">
   </form>
   

   Php - в одном цикле создаются строки... в другом столбцы.

   Для отправки данных еще понадобится post

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

   Скрипт Php, который создает таблицу, вы можете протестировать на этом примере:

   Сделать таблицу Php.

   Скачать данный скрипт.

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

   Скачать скрипт создание таблицы php.

   Что в архиве?
   Пример сделать таблицу Php отсюда запакован в архив.

   Скачать данный скрипт.

   27.11.2022 Что нового?

   Вывод на экране получившуюся таблицу.

   + Добавил стили, чтобы вы могли увидеть таблицу на экране.

   Ширина таблицы 100% займет внутреннее пространство блока.






3. Сделать таблицу html в javascript

   Теперь - разберем создание таблицы в javascript.

   Генерация таблицы буде происходить без перезагрузки страницы.

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

   Сделать таблицу html в javascript

   Для того, чтобы создать таблицу в javascript нажмите кнопку
   

   Необходимо выбрать количество строк таблицы.

   Далее нужно выбрать необходимое количество столбцов.

   Нажмите кнопку "сгенерировать таблицу в javascript"
   
   Сюда отправим созданную таблицу

   Форма для создания таблицы html в javascript

   
   
   сгенерировать таблицу в javascript
   Очистить
   
   
   
   
   Скопировать ссылку

   Как работает создание таблицы javascript?

   Вообще... получилось, что мы создаем таблицу двумя способами...

   Когда видно саму таблицу.

   Т.е. мы создаем реальную таблицу с реальным кодом, которая и есть таблица.

   Выше я сделал создание таблицы от выбранных показателей строк и столбцов.

   Чтобы вас не утомлять длинным кодом используем простой пример для понимания, как можно регенерировать таблицу в javascript... с использованием "createElement"

   Создадим таблицу 3 х 3 :

   Html :

   <table id="do_table"></div>

   javascript А код "javascript", который создает таблицу вы можете скачать здесь
   

   Результат создания таблицы в javascript

   Размещаем выше приведенный код создания таблицы - прямо здесь:

   Что в архиве?

   В архиве отдельная страница с примером, который показан выше.

   Добавлены стили, таблица на всю ширину.

   + Добавлен border толщиной 1px + высоту "td" в 20px чтобы таблицу можно было увидеть!

   Скачиваем здесь.

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

   Вывод кода таблицы javascript?

   Вывод генерации кода таблицы, т.е. когда мы увидим не таблицу, а код таблицы.

   Единственное, что здесь код отличается наличием innerHTML

   Также создадим код таблицы 3 х 3

   Html:

   <div id="table_div"></div>

   javascript :

   <script>

   table_div.innerHTML = '&lt;table&gt;<br>';

   for (let i1 = 0; i1 < 3; i1++)

   {

   table_div.innerHTML = table_div.innerHTML + '&nbsp;&nbsp;&lt;tr&gt;<br>';

   for (let i = 0; i < 3; i++)

   {

   table_div.innerHTML = table_div.innerHTML + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; &lt;/td&gt;<br>';

   }

   table_div.innerHTML = table_div.innerHTML + '&nbsp;&nbsp;&lt;/tr&gt;<br>';

   }

   table_div.innerHTML = table_div.innerHTML + '&lt;/table&gt;<br>';

   </script>

   Пример создания кода таблицы в javascript

   Разместим код создания кода таблицы в javascript ниже и посмотрим, что же он нам выдаст на экран:

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

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

---