Для создания таблицы нам потребуется тег <table>...</table> - это контейнер, в котором прописываются строки и ячейки с содержимым. Давайте рассмотрим на примере: Создадим новый html-документ, и назовем его table.html; Между тегами <body>...</body> вставим контейнер для таблицы <table>...</table>; Далее нам нужно записать первую строку, строки обозначаются тегом <tr>...</tr>; В этой строке создадим пять ячеек. Ячейки обозначаются при помощи тега <td>...</td>: Таблица Между тегов <td> запишите какой нибудь текст, чтобы в браузере было понятно где какая ячейка. Сохраните изменения, откройте шаблон в браузере. Давайте добавим к таблице границу, для этого нужен атрибут border. Допишите <table border="1">...</table>. Увеличим отступы внутри ячейки при помощи атрибута cellpadding, и расстояние между ячейками уменьшим до нуля при помощи атрибута cellspacing. Чтобы таблица была полнее, скопируйте имеющуюся строку несколько раз, т.е. сделайте таблицу из 3 строк, например: Строки и ячейки таблицы Ячейки таблицы можно объединять. Чтобы объединить ячейки по горизонтали нужен атрибут colspan для тега <td>. А чтобы объединить ячейки по вертикали нужен атрибут rowspan. Для примера, допустим нам нужно в первой строке объединить все пять ячеек. Для этого мы пишем <td colspan="5">...</td>, а остальные ячейки в строке удаляем: Объединение ячеек А теперь давайте объединим ячейки по вертикали. Возьмем первую ячейку во второй строке и первую ячейку в третьей строке. Удаляем ячейку в третьей строке, а для первой запишем <td rowspan="2">...</td>: Объединение ячеек по вертикали В браузере получим такой результат:
Основы HTML Языка
УРОК ПЯТЫЙ ТАБЛИЦЫ
Для создания таблицы нам потребуется тег <table>...</table> - это контейнер, в котором прописываются строки и ячейки с содержимым. Давайте рассмотрим на примере:
Создадим новый html-документ, и назовем его table.html;
Между тегами <body>...</body> вставим контейнер для таблицы <table>...</table>;
Далее нам нужно записать первую строку, строки обозначаются тегом <tr>...</tr>;
В этой строке создадим пять ячеек. Ячейки обозначаются при помощи тега <td>...</td>:
Таблица
Между тегов <td> запишите какой нибудь текст, чтобы в браузере было понятно где какая ячейка. Сохраните изменения, откройте шаблон в браузере. Давайте добавим к таблице границу, для этого нужен атрибут border. Допишите <table border="1">...</table>. Увеличим отступы внутри ячейки при помощи атрибута cellpadding, и расстояние между ячейками уменьшим до нуля при помощи атрибута cellspacing. Чтобы таблица была полнее, скопируйте имеющуюся строку несколько раз, т.е. сделайте таблицу из 3 строк, например:
Строки и ячейки таблицы
Ячейки таблицы можно объединять. Чтобы объединить ячейки по горизонтали нужен атрибут colspan для тега <td>. А чтобы объединить ячейки по вертикали нужен атрибут rowspan. Для примера, допустим нам нужно в первой строке объединить все пять ячеек. Для этого мы пишем <td colspan="5">...</td>, а остальные ячейки в строке удаляем:
Объединение ячеек
А теперь давайте объединим ячейки по вертикали. Возьмем первую ячейку во второй строке и первую ячейку в третьей строке. Удаляем ячейку в третьей строке, а для первой запишем <td rowspan="2">...</td>:
Объединение ячеек по вертикали
В браузере получим такой результат: