Как сделать таблицу в HTML: знакомство с основными тегами и их атрибутами

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Цвета в HTML
  7. Как создать форму в HTML?
  8. Табличная верстка сайта
  9. Теги в HEAD
  10. Изображения в html
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

Создание таблиц в html определяет тег <table>.  Границы таблицы определяются с помощью атрибута border. Если border=0 то граница таблицы не видна совсем. Тег <tr>  определяет строки, а тег <td> определяет столбцы страницы. Для обозначения заголовков используется тег <th>.  Создайте новую страницу table.html. В ней мы с помощью вышеперечисленных тегов создадим такую таблицу:

Заголовок 1 Заголовок 2 Заголовок3
Строка 1 столбец1 Строка 1 столбец2 Строка 1 столбец3
Строка 2столбец1 Строка 2 столбец2 Строка 2 столбец3

 

Код:

<html>
<body>
<table  border=”1”>
<tr>
<th>Заголовок1</th>
<th>Заголовок2</th>
<th>Заголовок3</th>
</tr>
<tr>
<td> Строка 1 столбец 1</td>
<td> Строка 1 столбец 2</td>
<td> Строка 1 столбец 2</td>
</tr>
<tr>
<td> Строка 2 столбец 1</td>
<td> Строка 2 столбец 2</td>
<td> Строка 2столбец 3</td>
</tr>
</table>
</body>
</html>

Для задания таблицы мы сначала открываем тег <table>. Первая строка таблицы начинается с тега <tr>. Внутри этого тега мы прописываем столбцы (тег <td>). Соответственно строка нашей таблицы прописывается так:

<tr>
<td> Строка 1 столбец 1</td>
<td> Строка 1 столбец 2</td>
<td> Строка 1 столбец 2</td>
</tr>

Потом с тега <tr> мы прописываем следующую строку, и так до конца таблицы.

Посмотрите в браузере что у вас получилось.

В этом уроке мы научились делать простейшие таблицы. Теперь познакомимся с инструментами  создания таблиц в Dreamweaver.

Создание таблиц в Dreamweaver.

Dreamweaver имеет отличные инструменты для создания таблиц. Создайте новую страницу table.html.

Создание таблиц в Dreamviewer. Шаг 1

Зайдите во вкладку Insert ( обозначено овалом), потом щелкните там по вкладке Table. В результате вы попадете в такое окно:

Создание таблиц в Dreamviewer. Шаг 2

Вставьте в окно строк (Rows, цифра 1) количество строк- 3, в окно колонн ( Columns, цифра 1) количество колонок-3. Толщину границы таблицы определим в 1 пиксель, для этого в вставим 1 в область Border thickness (цифра 2), после этого определимся c шапкой таблицы. В области Header выбираем какую  шапку сделать для нашей таблицы (цифра 3). После этого нажимаем ОК. В результате мы должны получить такой результат:

Создание таблиц в Dreamviewer. Шаг 3

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

Создание таблиц в Dreamviewer. Шаг 4

В следующем уроке мы научимся работать с цветами и делать наш сайт цветным.

 

Оставить ответ

Ваш email не будет показан.