Как сделать таблицу html, php, javascript примеры
"Тег table" - как сделать таблицу html? Сколько способов существует, чтобы сделать таблицу? Сделаем таблицу в html, php и javascript с примерами!
И сделаем генератор таблиц в двух языках!
Самая подробная инструкция по созданию таблицы html
-
Что такое таблица 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 с двумя столбцами:
Если добавим второй столбец к приведенному примеру таблицы выше пунктом, то у нас получится таблица с двумя столбцами:
<tableborder="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 с тремя столбцами - нам достаточно проделать аналогичные действия в выше приведенном пункте - мы просто добавим еще один столбец нашей созданной таблице! добавляем к таблице третий столбец!
<tableborder="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 в php
Скачать можно два варианта:
Новый - новый взят из этого пункта в php
Принципиально - коды создания таблицы в php не отличаются...
Мне было интересно - как я напишу этот же самый код через... несколько лет...
Сделать таблицу html
в 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, который создает таблицу, вы можете протестировать на этом примере:
Скачать данный скрипт.
Скачать скрипт создание таблицы
Вывод на экране получившуюся таблицу.
+ Добавил стили, чтобы вы могли увидеть таблицу на экране.
Ширина таблицы 100% займет внутреннее пространство блока.
Сделать таблицу html в javascript
Теперь - разберем создание таблицы в javascript.
Генерация таблицы буде происходить без перезагрузки страницы.
Сделать таблицу html
Для того, чтобы создать таблицу
Необходимо выбрать количество строк таблицы.
Далее нужно выбрать необходимое количество столбцов.
Нажмите кнопку "сгенерировать таблицу в javascript"
Форма для создания таблицы html
Как работает создание таблицы 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 = '<table><br>';
for (let i1 = 0; i1 < 3; i1++)
{
table_div.innerHTML = table_div.innerHTML + ' <tr><br>';
for (let i = 0; i < 3; i++)
{
table_div.innerHTML = table_div.innerHTML + ' <td> </td><br>';
}
table_div.innerHTML = table_div.innerHTML + ' </tr><br>';
}
table_div.innerHTML = table_div.innerHTML + '</table><br>';
</script>
Пример создания кода таблицы в javascript
Разместим код создания кода таблицы в javascript ниже и посмотрим, что же он нам выдаст на экран: