Здесь мы поговорим об атрибутах «colspan» и «rowspan». Colspan — определяет количество столбцов, на которые простирается данная ячейка, а rowspan — количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца или ряда). Итак, попробуем растянуть ячейку а-1 на два столбца (ячейки). Для этого мы используем атрибут colspan=»2″, прописав его для ячейки а-1. Код будет выглядеть следующим образом:
| <table> <tr> <td height=»50″ bgcolor=»red» colspan=»2″>а-1</td> <td width=»100″ bgcolor=»green»>а-2</td> <td width=»100″ bgcolor=»red»>а-3</td> </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green»>б-1</td> <td width=»100″ bgcolor=»red»>б-2</td> <td width=»100″ bgcolor=»green»>б-3</td> </tr> </table> |
При просмотре в браузере:
|
|||||||
Как вы видите, наша ячейка растянулась на две ячейки, тем самым вытеснив ячейку «а-3» за пределы нашей таблице. Для того чтобы ячейка «а-3» нам не мешала мы ее попросту удаляем:
| <table> <tr> <td height=»50″ bgcolor=»red» colspan=»2″>а-1</td> <td width=»100″ bgcolor=»green»>а-2</td> </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green»>б-1</td> <td width=»100″ bgcolor=»red»>б-2</td> <td width=»100″ bgcolor=»green»>б-3</td> </tr> </table> |
При просмотре в браузере:
|
||||||
Параметр «rowspan» работает по такому же принципу: прописываем атрибут «rowspan=»количество ячеек, которые хотим объединить»» для желаемой ячейки, удаляем лишние ячейки из таблицы, которые должна заменить наша удлиняемая ячейка (обязательно):
| <table> <tr> <td height=»50″ bgcolor=»red» colspan=»2″>а-1</td> <td width=»100″ bgcolor=»green» rowspan=»2″>а-2</td> </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green»>б-1</td> <td width=»100″ bgcolor=»red»>б-2</td> </tr> </table> |
При просмотре в браузере:
|
|||||
Рассмотрим еще три атрибута для нашей таблице:
<table cellpadding=»10″> — задает размер отступа содержимого ячейки от края ячейки.
<table cellspacing=»10″> — задает толщину пространства между ячейками таблицы в пикселях.
<table border=»10″> — задает толщину рамки в пикселях.
| <table cellpadding=»10″ cellspacing=»10″ border=»10″> <tr> <td height=»50″ bgcolor=»red» colspan=»2″>а-1</td> <td width=»100″ bgcolor=»green» rowspan=»2″>а-2</td> </tr> <tr> <td height=»50″ width=»100″ bgcolor=»green»>б-1</td> <td width=»100″ bgcolor=»red»>б-2</td> </tr> </table> |
При просмотре в браузере:
| а-1 | а-2 | |
| б-1 | б-2 | |
Поэкспериментируйте с этими атрибутами для лучшего освоения материала.
На этом мы закончим наше знакомство с HTML. В принципе этих знаний достаточно для того чтобы создавать несложные сайты (сайты одностраничники) но если вы хотите изучить данный язык более детально, то можете скачать учебник html из раздела «Учебники»
