Как создать таблицу в HTML

Загрузить PDF
Загрузить PDF

Создать таблицу в HTML довольно сложно. Но с помощью шагов, представленных в этой статье, вы сможете создать ее для вашего сайта.

Шаги

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/65\/Italicize-Text-in-HTML-Step-1.jpg\/v4-460px-Italicize-Text-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/65\/Italicize-Text-in-HTML-Step-1.jpg\/v4-677px-Italicize-Text-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":266,"bigWidth":677,"bigHeight":391,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Откройте простую программу текстового редактора, например Notepad или WordPad на Windows, или на Mac откройте TextEdit.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/3\/37\/Create-a-Table-in-HTML-Code-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Create-a-Table-in-HTML-Code-Step-2.jpg\/v4-402px-Create-a-Table-in-HTML-Code-Step-2.jpg","smallWidth":460,"smallHeight":160,"bigWidth":402,"bigHeight":140,"licensing":"<div class=\"mw-parser-output\"><\/div>"}


  3. Step 3 Определите использование таблицы для HTML документа, введя тэг <table>.
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/0\/09\/Create-a-Table-in-HTML-Code-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/0\/09\/Create-a-Table-in-HTML-Code-Step-3.jpg","smallWidth":460,"smallHeight":194,"bigWidth":550,"bigHeight":232,"licensing":"<div class=\"mw-parser-output\"><\/div>"}


  4. Step 4 Нажмите Enter.
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/3\/35\/Create-a-Table-in-HTML-Code-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/3\/35\/Create-a-Table-in-HTML-Code-Step-4.jpg","smallWidth":460,"smallHeight":193,"bigWidth":550,"bigHeight":231,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/0\/0d\/Create-a-Table-in-HTML-Code-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/Create-a-Table-in-HTML-Code-Step-5.jpg\/v4-429px-Create-a-Table-in-HTML-Code-Step-5.jpg","smallWidth":460,"smallHeight":181,"bigWidth":429,"bigHeight":169,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  6. 6
    Не забудьте построить все оставшиеся элементы слева направо.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/7\/74\/Create-a-Table-in-HTML-Code-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/74\/Create-a-Table-in-HTML-Code-Step-7.jpg\/v4-415px-Create-a-Table-in-HTML-Code-Step-7.jpg","smallWidth":460,"smallHeight":205,"bigWidth":415,"bigHeight":185,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/4\/42\/Create-a-Table-in-HTML-Code-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/Create-a-Table-in-HTML-Code-Step-8.jpg\/v4-405px-Create-a-Table-in-HTML-Code-Step-8.jpg","smallWidth":460,"smallHeight":212,"bigWidth":405,"bigHeight":187,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/0\/01\/Create-a-Table-in-HTML-Code-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Create-a-Table-in-HTML-Code-Step-9.jpg\/v4-432px-Create-a-Table-in-HTML-Code-Step-9.jpg","smallWidth":460,"smallHeight":196,"bigWidth":432,"bigHeight":184,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/1\/1e\/Create-a-Table-in-HTML-Code-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1e\/Create-a-Table-in-HTML-Code-Step-10.jpg\/v4-451px-Create-a-Table-in-HTML-Code-Step-10.jpg","smallWidth":460,"smallHeight":189,"bigWidth":451,"bigHeight":185,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите закрывающий тэг для элемента заглавия таблицы с помощью тэга </th>.
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/Create-a-Table-in-HTML-Code-Step-11.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/Create-a-Table-in-HTML-Code-Step-11.jpg\/v4-523px-Create-a-Table-in-HTML-Code-Step-11.jpg","smallWidth":460,"smallHeight":182,"bigWidth":523,"bigHeight":207,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/8\/85\/Create-a-Table-in-HTML-Code-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/85\/Create-a-Table-in-HTML-Code-Step-12.jpg\/v4-457px-Create-a-Table-in-HTML-Code-Step-12.jpg","smallWidth":460,"smallHeight":209,"bigWidth":457,"bigHeight":208,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-a-Table-in-HTML-Code-Step-13.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-a-Table-in-HTML-Code-Step-13.jpg\/v4-508px-Create-a-Table-in-HTML-Code-Step-13.jpg","smallWidth":460,"smallHeight":210,"bigWidth":508,"bigHeight":232,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  14. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9d\/Create-a-Table-in-HTML-Code-Step-14.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9d\/Create-a-Table-in-HTML-Code-Step-14.jpg\/v4-523px-Create-a-Table-in-HTML-Code-Step-14.jpg","smallWidth":460,"smallHeight":225,"bigWidth":523,"bigHeight":256,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  15. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Create-a-Table-in-HTML-Code-Step-15.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Create-a-Table-in-HTML-Code-Step-15.jpg\/v4-520px-Create-a-Table-in-HTML-Code-Step-15.jpg","smallWidth":460,"smallHeight":234,"bigWidth":520,"bigHeight":264,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  16. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/Create-a-Table-in-HTML-Code-Step-16.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/Create-a-Table-in-HTML-Code-Step-16.jpg\/v4-484px-Create-a-Table-in-HTML-Code-Step-16.jpg","smallWidth":460,"smallHeight":263,"bigWidth":484,"bigHeight":277,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  17. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/48\/Create-a-Table-in-HTML-Code-Step-17.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/48\/Create-a-Table-in-HTML-Code-Step-17.jpg\/v4-542px-Create-a-Table-in-HTML-Code-Step-17.jpg","smallWidth":460,"smallHeight":254,"bigWidth":542,"bigHeight":299,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  18. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/03\/Create-a-Table-in-HTML-Code-Step-18.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/03\/Create-a-Table-in-HTML-Code-Step-18.jpg\/v4-561px-Create-a-Table-in-HTML-Code-Step-18.jpg","smallWidth":460,"smallHeight":244,"bigWidth":561,"bigHeight":298,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  19. 19
    Работайте слева направо, заполняя данные из столбцов, показанных выше.
  20. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a6\/Create-a-Table-in-HTML-Code-Step-20.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a6\/Create-a-Table-in-HTML-Code-Step-20.jpg\/v4-507px-Create-a-Table-in-HTML-Code-Step-20.jpg","smallWidth":460,"smallHeight":271,"bigWidth":507,"bigHeight":299,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  22. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Create-a-Table-in-HTML-Code-Step-22.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Create-a-Table-in-HTML-Code-Step-22.jpg\/v4-609px-Create-a-Table-in-HTML-Code-Step-22.jpg","smallWidth":460,"smallHeight":262,"bigWidth":609,"bigHeight":347,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  23. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Create-a-Table-in-HTML-Code-Step-23.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Create-a-Table-in-HTML-Code-Step-23.jpg\/v4-728px-Create-a-Table-in-HTML-Code-Step-23.jpg","smallWidth":460,"smallHeight":262,"bigWidth":728,"bigHeight":415,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Повторите каждую строку вниз в дополнение к строкам <tr> и </td>, пока каждая строка не будет собрана.
  24. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-a-Table-in-HTML-Code-Step-24.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-24.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-a-Table-in-HTML-Code-Step-24.jpg\/v4-719px-Create-a-Table-in-HTML-Code-Step-24.jpg","smallWidth":460,"smallHeight":279,"bigWidth":719,"bigHeight":436,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  25. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/03\/Create-a-Table-in-HTML-Code-Step-25.jpg\/v4-460px-Create-a-Table-in-HTML-Code-Step-25.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/03\/Create-a-Table-in-HTML-Code-Step-25.jpg\/v4-728px-Create-a-Table-in-HTML-Code-Step-25.jpg","smallWidth":460,"smallHeight":272,"bigWidth":728,"bigHeight":430,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите последующий HTML текст, который вам нужен в остальной части документа.
    Реклама

Советы

  • Отступайте от каждой строки, чтобы можно было понять что вы пытаетесь сделать в вашем коде.
Реклама

Предупреждения

  • Если вы случайно ввели слишком много столбцов данных там, где нет заглавия таблицы, они все равно будут показаны, но будут выглядеть немного глупо и читатель не поймет к чему эта информация.
  • Построение таблиц на странице HTML довольно сложный процесс для понимания. Сначала попрактикуйтесь на внешних данных, чтобы посмотреть как это выглядит, затем просмотрите и поместите новую таблицу на их место.
  • Код таблицы HTML лучше всего оставить для продвинутых кодировщиков HTML. Тем не менее, после того, как вы выполните эти инструкции, вы тоже станете одним из них.
Реклама

Дополнительные статьи

Как
запустить файл Python с помощью Командной строки Windows
Как
написать программу в блокноте
Как
вставить пробелы в HTML
Как
добавить веб–сайт в надежные узлы
Как
добавлять и удалять учетные записи пользователей через командную строку Windows
Как
добавить горизонтальную линию в HTML
Как
научиться писать программы
Как
использовать Net Send
Как
менять цвета в Командной строке
Как
скомпилировать программу C, используя компилятор GNU Compiler (GCC)
Как
сделать задержку в командном файле
Как
создать гиперссылку в HTML
Как
использовать DOSBox
Как
создать базу данных в среде SQL Server
Реклама

Источники

  1. http://www.w3.org/TR/html4/struct/tables.html
  2. Creating a Web Site: The Missing Manual(Second Edition) by Matthew McDonald p. 233-235)

Об этой статье

На других языках
Эту страницу просматривали 5451 раз.

Была ли эта статья полезной?

Реклама