23.1.2 Специальные символы
Специальные символы не часто употребляются, но, тем не менее, в текстах они бывают необходимы:
(1) - < - знак меньше (<)
(2) - > - знак больше (>)
(3) - " - кавычка (")
(4) - - пробел
(5) - & - знак &
Так как все символы, заключенное между скобками < и > браузер воспринимает как тэг, то чтобы ввести в текст символы скобок, придумали специальные символ (1) и (2).
Применить вышеуказанные специальные символы можно, как в следующем примере:
Символ пробела (4)
слово1 слово2 слово3 = слово1 слово2 слово3
Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но на самом деле это одно длинное слово, а не три, т.к. - неделимый символ.
Символ & используется для написания спецсимволов, поэтому для него тоже существует спецсимвол &.
Специальные символы не надо включать ни в какие тэги, они считаются просто текстом.
23.1.3 Таблицы
Таблицы являются основным элементом разметки html страниц. С их помощью определяются зоны, в которых на странице будут располагаться объекты. В ячейках таблицы могут помещаться рисунки, текст, списки, ссылки, другие таблицы и т.д.
Таблица задается тэгом:
<table> (</table>)
Таблица состоит из строк и столбцов (ячеек), поэтому их надо указать:
<tr></tr> - строка таблицы;
<td></td> - столбец (ячейка) таблицы.
Сначала следует задавать строки (пусть их будет две):
<table>
<tr></tr>
<tr></tr>
</table>
Затем в каждой строке задаются столбцы (ячейки):
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Теперь надо заполнить получившийся каркас:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Первая цифра в этих записях - это номер ряда, а вторая - номер столбца (1х2 - первый ряд, второй столбец и т.д.).
Если посмотреть, что уже получилось, то это будет выглядеть так:
-
1x1
1x2
1x3
2x1
2x2
2x3
Фон таблицы задается параметром bgcolor="цвет фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В следующем примере зададим фон для каждого столбца.
<table> <tr> <td bgcolor="FFCC33">1x1</td> <td bgcolor="336699">1x2</td> <td bgcolor="FFCC33">1x3</td> </tr> <tr> <td bgcolor="336699">2x1</td> <td bgcolor="FFCC33">2x2</td> <td bgcolor="336699">2x3</td> </tr> </table>
Параметры height и width можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В примере зададим ширину и высоту в пикселях для столбцов (ячеек):
<table> <tr> <td height="35" width="50" bgcolor="FFCC33"> 1x1 </td> <td width="50" bgcolor="336699"> 1x2 </td> <td width="50" bgcolor="FFCC33"> 1x3 </td> </tr> <tr> <td height="35" width="50" bgcolor="336699"> 2x1 </td> <td width="50" bgcolor="FFCC33"> 2x2 </td> <td width="50" bgcolor="336699"> 2x3 </td> </tr> </table>
Если в ряду задается для какого-либо столбца (ячейки) высота большая, чем для других, то все ячейки (столбцы) ряда станут по высоте равными наибольшей. То же самое с рядами: если задать для какого-то ряда наибольшую длину, то все остальные ряды выровняются по наибольшему ряду.
Можно задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально в процентах от общей ширины (высоты) таблицы или пикселях.
Теперь осталось лишь выровнять содержимое внутри таблицы:
<table>
<tr>
<td height="35" width="50" bgcolor="FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="336699"> <center> 2x3 </center> </td>
</tr>
</table>
В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже другие таблицы (в этом случае такие таблицы называются - вложенными).
Тэги, которые применяются для форматирования текста - те же, что для обычного текста.
Тэги для центрирования текста могут прописываться в каждой ячейке.
Вертикальное выравнивание задается атрибутом valign="middle" , т.е. содержимое конкретной ячейки будет находиться в середине ячейки (top - наверху или bottom - внизу).
Пример:
<table>
<tr>
<td height="35" width="50" bgcolor="FFCC33" valign="top">
<center>1x1</center> </td>
<td width="50" bgcolor="336699"> <center>1x2</center> </td>
<td width="50" bgcolor="FFCC33" valign="bottom"> <center>1x3</center>
</td>
</tr>
<tr>
<td height="35" width="50" bgcolor="336699" valign="bottom">
<center>2x1</center> </td>
<td width="50" bgcolor="FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="336699" valign="top"> <center>2x3</center>
</td>
</tr>
</table>
Таблица может создаваться с рамкой. Рамка вводится параметром border. Зададим рамку шириной 3 пикселя: <table border="3">.
Результат показан на рисунке 23.1.
Рисунок 23.1 – Таблица с закрашенным фоном ячеек