Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



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


  логин:   
  пароль: 
Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

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


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


  Видеокурсы:


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

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



  Опрос:



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


40

Приметы времени: в завещаниях XXI века будет очень много логинов и паролей.

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



Задаем высоту и ширину таблице и ячейкам, выравниваем содержимое по краям

дальше зададим высоту и ширину ячейкам нашей таблицы. Для этого предназначены атрибуты «height» и «width» - вы можете их задать для всей таблицы, для одного ряда или для ячейки. Высота и ширина могут задаваться как в пикселях, так и в процентах. Мы будем задавать ширину и высоту в пикселях.

<table>
<tr>
<td height="50" width="100" bgcolor="red">а-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

Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому, наибольшему ряду.

Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.

Теперь нам осталось лишь выровнять содержимое внутри таблицы:

<table>
<tr>
<td height="50" width="100"bgcolor="red"><center>а-1</center></td>
<td width="100" bgcolor="green" align="left">а-2</td>
<td width="100" bgcolor="red" valign="bottom">а-3</td>
</tr>
<tr>
<td height="50" width="100" bgcolor="green" valign="bottom"><center>б-1</center></td>
<td width="100" bgcolor="red" align="right">б-2</td>
<td width="100" bgcolor="green" valign="top"><center>б-3</center></td>
</tr>
</table>

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

И так если мы посмотрим внимательно на наш код, мы увидим, что «align», задает горизонтальное выравнивание содержимого ячейки, а «valign» – вертикальное, тэг <center> </center> отвечает за центрирования содержимого ячейки.

valign="top" – выравнивает содержимое ячейки по верхнему краю, по умолчанию в левом углу.
valign="bottom" – выравнивает по нижнему краю.
align="left" - выравнивает по левому краю.
align="right" - выравнивает по правому краю.
<center> </center> - выравнивают все что в них заключено, по центру.

Если вы хотите выровнять содержимое ячейки по верхнему – правому краю, то нужно указать два атрибута:

<td bgcolor="red" valign="top" align="right">б-2</td>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

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


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

Комментарии


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

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



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