Уроки HTML для начинающих.
Таблица HTML (урокN5)
В этом уроке(N5) мы с Вами рассмотрим ещё 2 атрибута таблицы CELLSPACİNG и CELLPADDİNG
| table cellspacing="#" | Задает расстояние между ячейками таблицы. |
| table cellpadding="#" | Задает расстояние между содержимым ячейки и ее рамкой. |
И так рассмотрим атрибут CELLSPACİNG для примера возьмём вот такую таблицу:
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
вот её код:
<table border=5> <tr><td height="35" width="100" bgcolor="#CD853F"> 1 ячейка</td> <td width="100" bgcolor="#FFD700">2 ячейка</td> <td width="100" bgcolor="#CD853F">3 ячейка</td></tr> <tr><td height="35" width="100" bgcolor="#FFD700">4 ячейка</td> <td width="100" bgcolor="#CD853F">5 ячейка</td> <td width="100" bgcolor="#FFD700">6 ячейка</td></tr> </table>
Смотрим что я сейчас сделаю! В таблице убираю border=5 и вставляю наш атрибут cellspacing="0"
<table cellspacing="0"> <tr><td height="35" width="100" bgcolor="#CD853F"> 1 ячейка</td> <td width="100" bgcolor="#FFD700"> 2 ячейка</td> <td width="100" bgcolor="#CD853F"> 3 ячейка</td></tr> <tr><td height="35" width="100" bgcolor="#FFD700"> 4 ячейка</td> <td width="100" bgcolor="#CD853F"> 5 ячейка</td> <td width="100" bgcolor="#FFD700"> 6 ячейка</td></tr> </table>
У нас получилась таблица без пространства между ячейками:
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
А теперь давайте увеличим пространство между ячейками,допустим cellspacing="8"
<table cellspacing="8"> <tr><td height="35" width="100" bgcolor="#CD853F"> 1 ячейка</td> <td width="100" bgcolor="#FFD700"> 2 ячейка</td> <td width="100" bgcolor="#CD853F"> 3 ячейка</td></tr> <tr><td height="35" width="100" bgcolor="#FFD700"> 4 ячейка</td> <td width="100" bgcolor="#CD853F"> 5 ячейка</td> <td width="100" bgcolor="#FFD700"> 6 ячейка</td></tr> </table>
И вот что у нас получилось:
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
Идём дальше))Теперь давайте рассмотрим атрибут CELLPADDİNG Опять таки для примера берём нашу таблицу
<table border="5"> <tr><td height="35" width="100" bgcolor="#CD853F"> 1 ячейка</td> <td width="100" bgcolor="#FFD700"> 2 ячейка</td> <td width="100" bgcolor="#CD853F"> 3 ячейка</td></tr> <tr><td height="35" width="100" bgcolor="#FFD700"> 4 ячейка</td> <td width="100" bgcolor="#CD853F"> 5 ячейка</td> <td width="100" bgcolor="#FFD700"> 6 ячейка</td></tr> </table>
Теперь меняем атрибут border="5" на атрибут допустим cellpadding="8" и ещё я добавила атрибут align="center" надеюсь Вы не забыли,мы разберали Выравнивание содержимого ячеек в таблице на прошлом нашем урокеЗДЕСЬ
<table cellpadding="8" > <tr><td height="35" width="100" bgcolor="#CD853F" align="center">1 ячейка</td> <td width="100" bgcolor="#FFD700" align="center">2 ячейка</td> <td width="100" bgcolor="#CD853F" align="center">3 ячейка</td></tr> <tr><td height="35" width="100" bgcolor="#FFD700" align="center">4 ячейка</td> <td width="100" bgcolor="#CD853F" align="center">5 ячейка</td> <td width="100" bgcolor="#FFD700" align="center">6 ячейка</td></tr> </table>
И вот результаты наших таблиц:
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
| 1 ячейка | 2 ячейка | 3 ячейка |
| 4 ячейка | 5 ячейка | 6 ячейка |
Теперь Вам должно быть понятно, что поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибут cellpadding="0" (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячеек).
На этом урок заканчивается))Что не понятно пишите,будем разбираться вместе.
• Атрибуты таблицы. ЗДЕСЬ.
• Все цвета интернета ЗДЕСЬ
• Подобрать HTML код в ручную ЗДЕСЬ
Понравился пост - добавь в закладки, чтобы не потерять:
Комментариев нет:
Отправить комментарий