- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
Создание таблиц в 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.
Зайдите во вкладку Insert ( обозначено овалом), потом щелкните там по вкладке Table. В результате вы попадете в такое окно:
Вставьте в окно строк (Rows, цифра 1) количество строк- 3, в окно колонн ( Columns, цифра 1) количество колонок-3. Толщину границы таблицы определим в 1 пиксель, для этого в вставим 1 в область Border thickness (цифра 2), после этого определимся c шапкой таблицы. В области Header выбираем какую шапку сделать для нашей таблицы (цифра 3). После этого нажимаем ОК. В результате мы должны получить такой результат:
Заполняем колонки таблицы, используя кнопки форматирования текста в панели управления (см. главу по работе с текстом). После всех манипуляций у нас получилась искомая таблица:
В следующем уроке мы научимся работать с цветами и делать наш сайт цветным.