Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Советы программисту:
Отношения с заказчиком станут менее формальными, если программа начисления зарплаты вместо 'ИТОГО' будет печатать 'ИГОГО'

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Серьёзной хостинговой компании требуется квалифицированная уборщица. Требования: знание UNIХ-систем, способность восстановить систему после своих действий.

  Моя группа в контакте:



Объединяем ячейки таблицы

Здесь мы поговорим об атрибутах «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>

При просмотре в браузере:
а-1 а-2 а-3
б-1 б-2 б-3

Как вы видите, наша ячейка растянулась на две ячейки, тем самым вытеснив ячейку «а-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>

При просмотре в браузере:
а-1 а-2
б-1 б-2 б-3

Параметр «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>

При просмотре в браузере:
а-1 а-2
б-1 б-2

Рассмотрим еще три атрибута для нашей таблице:

<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 из раздела «Учебники»

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь