 |
В предыдущих статьях мы разобрали основы создания html страниц, но один очень важный вопрос остался не освещенным, а именно - создание таблиц.
Очень часто, нам бывает необходимо разместить на своей страничке таблицу, содержащую текстовую или графическую информацию. Как же это сделать?
Да очень просто =)!
Существует специальный тег <table></table>, с помощью которого можно создавать таблицы. Этот тег указывает начало и конец таблицы. Строки этой таблицы задаются с помощью тегов <tr></tr>, а столбцы с помощью <td></td>.
Ну что, рассмотрим пример?
Пусть нам необходимо создать таблицу из 2 строк и 3 столбцов. Открываем html документ и заносим туда следующий код:
<html>
<body>
<table>
<tr>
<td>А1</td>
<td>А2</td>
<td>А3</td>
</tr>
<tr>
<td>Б1</td>
<td>Б2</td>
<td>Б3</td>
</tr>
</table>
</body>
</html>
Результат будет иметь вид:
Какая то не особо привлекательная получилась таблица=(... А что если добавить к ней цвета и изменить размер ячеек?
<html>
<body>
<table>
<tr>
<td height="30" width="60" bgcolor="#CC6699 " >А1</td>
<td height="30" width="60" bgcolor="#CC6699 " >А2</td>
<td height="30" width="60" bgcolor="#CC6699 " >А3</td>
</tr>
<tr>
<td height="30" width="60" bgcolor="#9999FF " >Б1</td>
<td height="30" width="60" bgcolor="#9999FF " >Б2</td>
<td height="30" width="60" bgcolor="#9999FF " >Б3</td>
</tr>
</table>
</body>
</html>
Результат:
Ну вот! Совсем другое дело! Красивая яркая таблица, аж глаз радуется=)
Ну вот осталось совсем чуть чуть=) Сейчас рассмотрим как объединять ячейки в таблицы и закончим.
Для объединения ячеек таблицы служат два параметра colspan и rowspan. Сolspan определяет количество столбцов, которое будет охватывать данная ячейка, а rowspan количество строк. Чтобы понять, как работают эти параметры, рассмотрим примеры:
<html>
<body>
<table>
<tr>
<td height="30" width="60" bgcolor="#CC6699 " " colspan="2" >А1</td>
<td height="30" width="60" bgcolor="#CC6699 " >А2</td>
</tr>
<tr>
<td height="30" width="60" bgcolor="#9999FF " >Б1</td>
<td height="30" width="60" bgcolor="#9999FF " >Б2</td>
<td height="30" width="60" bgcolor="#9999FF " >Б3</td>
</tr>
</table>
</body>
</html>
Страница:
И еще один пример:
<html>
<body>
<table>
<tr>
<td height="30" width="60" bgcolor="#CC6699 " " rowspan="2" >А1</td>
<td height="30" width="60" bgcolor="#CC6699 " >А2</td>
<td height="30" width="60" bgcolor="#CC6699 " >А3</td>
</tr>
<tr>
<td height="30" width="60" bgcolor="#9999FF " >Б2</td>
<td height="30" width="60" bgcolor="#9999FF " >Б3</td>
</tr>
</table>
</body>
</html>
Страница будет иметь вид:
Ну, вот и все! Теперь мы умеем создавать таблицы для своего сайта. Если же вам, что-то осталось непонятным, то прочитайте статью еще раз, ну а если у вас и после этого остались вопросы, то смело пишите нам и мы постараемся на них ответить =)
uogyrt специально для Nuikak.ru
|
|
| |
 |
Программы
