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

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

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

1. Что такое таблица html
   
   1. Синтаксис таблицы html
   2. Пример таблицы html
   3. Пример таблицы html с двумя столбцами
   4. Пример таблицы html с тремя столбцами
2. Таблицы html в php
   
   1. Сделать таблицу html онлайн в php
   2. Как работает создание таблицы онлайн 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 создание таблицы

   <?

   if($_POST['string'] and $_POST['column'])

   {

   echo '<table>'."\n<br>";

   for ($i1=0; $i1 < $_POST['string']; $i1++)

   {

   echo '<tr>'."\n<br>";

   echo '<td> </td>'."\n<br>";

   for ($i=1; $i < $_POST['column'] ; $i++)

   {

   echo '<td> </td>'."\n<br>";

   }

   echo '</tr>'."\n<br>";

   }

   echo '</table>';

   }

   ?>

   Форма скрыта






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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Html :

   <table id="table"></table>

   javascript

   <script>

   let table = document.querySelector('#table');

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

   {

   let tr = document.createElement('tr');

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

   {

   let td = document.createElement('td');

   tr.appendChild(td);

   }

   table.appendChild(tr);

   }

   </script>

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

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

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

   Вывод кода таблицы 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

🞨

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

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

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

---