Простые таблицы
TABLE - Для того чтобы изобразить
таблицу ее надо сначала представить: это
строки и столбцы. Сложность для понимания
html разметки таблицы заключается в том, что
описание таблицы пойдет построчно. Итак, по
порядку:
<table></table> - теги
открывающий и закрывающий таблицу.
<tr></tr> - теги
открывающий и закрывающий текущую строку
таблицы.
<td></td> - теги
открывающий и закрывающий текущую ячейку в
строке таблицы.
<html><body>
<table>
<tr><td>1 ячейка</td><td>2 ячейка</td></tr>
</table>
</body></html>
Таблица будет выглядеть так:
Обратите внимание, <table> -
открыли тег таблицы, <tr> - открыли тег
строки, <td></td><td></td> - два
раза открыли и закрыли теги ячейки, и в них
вписали простой текст, </tr> - закрыли
тег строки, </table> - закрыли тег
таблицы.
<html><body>
<table>
<tr><td>1
ячейка</td><td>2
ячейка</td></tr>
<tr><td>3
ячейка</td><td>4
ячейка</td></tr>
</table>
</body></html>
Таблица будет выглядеть так:
| 1
ячейка | 2
ячейка |
| 3
ячейка | 4
ячейка |
<html><body>
<table>
<tr>
<td>1
ячейка</td>
<td>2 ячейка</td>
<td>3 ячейка</td>
</tr>
<tr>
<td>4
ячейка</td>
<td>5
ячейка</td>
<td>6
ячейка</td>
</tr>
<tr>
<td>7
ячейка</td>
<td>8
ячейка</td>
<td>9
ячейка</td>
</tr>
</table>
</body></html>
Таблица будет выглядеть так:
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
| 7 ячейка | 8 ячейка | 9 ячейка |
Ранее мы с Вами говорили, что нам все -
равно сколько будет пробелов и сколько
переходов на новую строку, все это дело
игнорируется в HTML тексте.
Как объединить ячейки? Добавляем
в теги конструкции colspan и rowspan.
colspan - объединяет ячейки в
строках
rowspan - объединяет ячейки в
стобцах
<html><body>
<table border="1">
<tr>
<td colspan="2">1 ячейка</td>
<td>2 ячейка</td>
</tr>
<tr>
<td>3 ячейка</td><td>4 ячейка</td>
<td rowspan="2">5 ячейка</td>
</tr>
<tr>
<td>6 ячейка</td>
<td>7 ячейка</td>
</tr>
</table>
</body></html>
Таблица будет выглядеть так:
| 1 ячейка | 2 ячейка |
| 3 ячейка | 4 ячейка | 5 ячейка |
| 6 ячейка | 7 ячейка |
Расположение текста в ячейках.
align - Горизонтальное
положение
valign - Вертикальное положение
<html><body>
<table
border="1">
<tr>
<td colspan="2" align="center">1 ячейка</td>
<td>2 ячейка</td>
</tr>
<tr>
<td>3 ячейка</td><td>4 ячейка</td>
<td rowspan="2" valign="top">5 ячейка</td>
</tr>
<tr>
<td>6 ячейка</td>
<td>7 ячейка</td>
</tr>
</table>
</body></html>
Таблица будет выглядеть так:
| 1 ячейка | 2 ячейка |
| 3 ячейка | 4 ячейка | 5
ячейка |
| 6 ячейка | 7 ячейка |
Ширина линий таблицы.
border - цифра будет обозначать
ширину линий.
<html><body>
<table border="5">
<tr>
<td colspan="2" align="center">1 ячейка</td>
<td>2 ячейка</td>
</tr>
<tr>
<td>3 ячейка</td><td>4 ячейка</td>
<td rowspan="2" valign="top">5 ячейка</td>
</tr>
<tr>
<td>6 ячейка</td>
<td>7 ячейка</td>
</tr>
</table>
</body></html>
Таблица будет выглядеть так:
| 1 ячейка | 2 ячейка |
| 3 ячейка | 4 ячейка | 5
ячейка |
| 6 ячейка | 7 ячейка |
если border="0"
Таблица будет выглядеть так:
| 1 ячейка | 2 ячейка |
| 3 ячейка | 4 ячейка | 5
ячейка |
| 6 ячейка | 7 ячейка |
Отправить письмо другу |
Связаться с админом |
Добавить фотоприкол |
Добавить анекдот |
Добавить историю |
Добавить рассказ
