Таблицы
Как уже говорилось в первом уроке «С чего начать?», структуру сайта легко представить в виде таблицы. Рассмотрим эту тему подробнее.
Создать таблицу на нашей страничке можно при помощи тега <table></table>.
В таблице естественно есть строки и столбцы. Чтобы создать таблицу с двумя строками и двумя столбцами, используем следующий код:
<table width="100%">
<tr>
<td>Строка 1 Столбец 1</td>
<td>Строка 1 Столбец 2</td>
</tr>
<tr>
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
</tr>
</table>
Из данного кода видно, что столбцы задаются внутри строки.
Вот что у нас получилось:
Строка 1 Столбец 1 | Строка 1 Столбец 2 |
Строка 2 Столбец 1 | Строка 2 Столбец 2 |
Теперь раскрасим ячейки в нашей таблице:
<table width="100%">
<tr>
<td bgcolor="#e9f116">Строка 1 Столбец 1</td>
<td >Строка 1 Столбец 2</td>
</tr>
<tr>
<td bgcolor="#fa963e">Строка 2 Столбец 1</td>
<td bgcolor="#e9f116">Строка 2 Столбец 2</td>
</tr>
</table>
Строка 1 Столбец 1 | Строка 1 Столбец 2 |
Строка 2 Столбец 1 | Строка 2 Столбец 2 |
Используя атрибут bgcolor, аналогичным образом можно задать фон всей таблице или строке. При этом, если Вы задали цвет фона всей таблице, а определенную ячейку хотите раскрасить в другой цвет – просто используйте атрибут bgcolor в этой ячейке.
Чтобы ячейки в таблице не были такими мелкими и в них были отступы от текста, необходимо задать высоту и ширину ячеек.
Если Вы указали высоту/ширину ячейки меньше, чем высота/ширина объекта (текст, картинка) внутри ячейки, то высота/ширина ячейки по умолчанию будет равна высоте/ширине объекта.
Если в строке для одной ячейки указать высоту большую, чем в остальных ячейках, то высота всей строки выравняется по высоте этой ячейки.
Если в столбце для одной ячейки указать ширину большую, чем в остальных ячейках, то ширина всего столбца выравняется по ширине этой ячейки.
Здесь нужна точность, т.к. могут “съехать” соседние столбцы или строки.
<table>
<tr height="50 px">
<td width="200 px">Строка 1 Столбец 1</td>
<td width="200 px">Строка 1 Столбец 2</td>
</tr>
<tr>
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
</tr>
</table>
Строка 1 Столбец 1 | Строка 1 Столбец 2 |
Строка 2 Столбец 1 | Строка 2 Столбец 2 |
Для выравнивания текста/картинок в ячейках таблицы используем уже знакомый нам атрибут align.
Также полезным для нас будет новый атрибут valign, он служит для выравнивания объектов по вертикали. Значения для атрибута следующие: top (выравнивание по верхней границе), bottom (выравнивание по нижней границе), middle (выравнивание по середине).
Есть вопросы? Задайте их через форму комментариев.
Добавить комментарий