Как сделать таблицы в HTML?

14

Posted by Виктория Павловна Дончик | Posted in Web-дизайн, Интернет | Posted on 13-02-2015

Метки:

Как сделать таблицы в HTML?Урок 4. Таблицы в HTML.

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

Таблица в HTML создается с помощью контейнера <table></table>, строки задаются тегом <tr></tr>, а столбцы тегом <td>текст ячейки</td>. Как это делается подробно разберем в видеоуроке:

Для форматирования таблицы можно использовать атрибуты для тега <table>, например:

  • border="число" – для отображения рамки таблицы
  • align="center"  - для центрирования таблицы
  • width="80%" - чтобы таблица занимала 80 процентов ширины экрана.

Изменить атрибуты можно и для конкретных ячеек или строк. Например, код <td align=”center”>ячейка</td> разместит содержимое в ячейке по центру. Обратите внимание, что при работе с таблицей ширина подстраивается под содержимое ячейки. Но с помощью атрибута width="число" ширину можно изменять. Размер задается, как в абсолютных значениях, например, width="20px" или width="200", так и в относительных width="80%."

Практикум

Задание 1:  Создайте таблицу в HTML вида: Пример таблиы с сайта htmlacademy.ru/   Задание 2: Создайте таблицу в HTML вида:

20tab1

Повторим материал по теме "Таблицы в HTML":

  • Как создать таблицу, например, 2х3? Запишите html-код.
  • Как изменить ширину первой строки в таблице?
  • Как изменить ширину всей таблицы?
  • Как задать заголовок к таблице?
  • Прокомментируйте <table width="50%" border="2" cellspacing="0" cellpadding="4">
  • Прокомментируйте <th>&nbsp;</th><th>Чебурашка</th>
  • Как объединить ячейки по вертикали?
  • Как объединить ячейки по горизонтали?
  • Можно ли вложить таблицы одна в другую?

Ответы на вопросы напишите в отчет по Практикуму, электронный вариант которого разместите на GD.
На предыдущем уроке изучали "Списки в HTML". По работе с таблицами рекомендую ознакомиться с материалом Алленовой Натальи - postroika.ru/html/21step2.html

 

Comments (14)

Виктория, вот серьезно, постараюсь сделать. Нет я делал таблицы, но вот в середине у меня постоянно были проблемы. Так что думаю, благодаря Вашей науке, проблем скоро не будет :)
Андрей Косолапов Месяца годаMy Profile

Андрей, уверена, что благодаря материалу этого занятия, у вас получится создавать таблицы. Кстати, скоро будут уроки по CSS и верстке.
Виктория Павловна Дончик Как сделать списки в HTML?My Profile

пока нет нужды в такой таблице, но если надумаю то уже знаю где посмотреть! информация очень полезна!
Elena Оформление детского праздникаMy Profile

Елена, в уроках HTML есть нужда для любознательных блогеров, для тех, кто хочет узнать тонкости создания и редактирования веб-страниц. Знаний много не бывает)) Рада, что зашли ко мне на блог и надеюсь, что узнали для себя что-то новое и полезное.
Виктория Павловна Дончик Теги и атрибуты HTMLMy Profile

Виктория, а не проще сделать таблицу в экселе, а потом скопировать её на страницу блога?
Дмитрий с Буридо Живое и мертвоеMy Profile

Лучше использовать специальные теги, для работы с таблицами на веб-страницах.
Виктория Павловна Дончик Как сделать списки в HTML?My Profile

От всей души поздравляю вас с 8 Марта!
Пусть исполняются заветные желания, пусть все будет замечательно, все надежды оправдаются, а все мечты – сбываются!
Желаю, чтобы в жизни все было не просто хорошо, а очень хорошо!
С праздником!
Светлана С праздником 8 Марта!My Profile

Огромное спасибо, и Вас, Светлана с праздником!
Виктория Павловна Дончик Как конвертировать презентацию в PDF-формат?My Profile

Виктория, а не проще ли сделать в экселе и вставить?
Дмитрий с Буридо Урок патриотизма: МексикаMy Profile

Нет, Дмитрий, Excel-файлы в браузере не откроются, поэтому таблички для интернет-страничек нужно делать именно так, как описано в посте)) Кстати, данный урок будет полезен не только студентам, а и блогерам для отформатирования таблиц в посте.
Виктория Павловна Дончик С 30-летним юбилеем Информатики!My Profile

Виктория, понятно. Это если форматировать и обновлять нужно. А если картинкой вставить табличку из экселя, то ведь ничего, а? Я обычно так делаю.
Дмитрий с Буридо Мобилен ли ваш сайт?My Profile

И что-то Вы пропали совсем, все в порядке?
Дмитрий с Буридо Тренажеры: вопросы и обсужденияMy Profile

Добрый день, Дмитрий. Рада вас видеть на страницах своего блога. Было много работы: готовила веб-квест по информатике к 30-летию предмета в рамках конкурса и предметной недели, создавала и администрировала новый сайт на гугл-конструкторе, создавала задания для веб-квеста, дистанционно курировала работу студентов, вообщем работала)) Приглашаю почитать отчет о работе и посмотреть презентацию открытого урока)
Виктория Павловна Дончик С 30-летним юбилеем Информатики!My Profile

Виктория, это отлично, когда работы много и она приносит удовольствие!
С отчетом и презентацией ознакомлюсь, спасибо.
А сайт в гугл-конструторе для учебных целей или это новый блогерский проект?
Дмитрий с Буридо Мобилен ли ваш сайт?My Profile

Write a comment