• Авторизация
Дневник LoRaLaRa Лента друзей - Дневник - Полная версия


HTML для начинающих: Задание ширины и высоты для таблицы с помощью атрибутов WIDTH и HEIGHT 27-09-2024 11:56 к комментариям - к полной версии - понравилось!

Это цитата сообщения БЕЛОЯР_2 Оригинальное сообщение

HTML для начинающих: Задание ширины и высоты для таблицы с помощью атрибутов WIDTH и HEIGHT


И так, на прошлом уроке мы научились делать вот такую таблицу.


1 ячейка 2 ячейка 3 ячейка
4 ячейка 5 ячейка 6 ячейка

В этом уроке мы с Вами научимся задавать ШИРИНУ и ВЫСОТУ ячейкам таблицы.


Ширина <table width="#"></table> Устанавливлюем ширину таблицы в пикселях или процентах
Высота <table height="#"></table> Устанавливлюем высоту таблицы в пикселях или процентах

И так, зададим ширину и высоту в пикселях для столбцов (ячеек).
Поехали!


<table border="5"><br />
<tr> <br />
<td height="75" width="70"> 1 ячейка </td> <br />
<td width="70"> 2 ячейка </td> <br />
<td width="70"> 3 ячейка </td> <br />
</tr><br />
</table>

И вот результат:

1 ячейка 2 ячейка 3 ячейка

Пример:
<table border="1"><br />
<tr> <br />
<td height="35" width="50"> 1 ячейка</td> <br />
<td width="50"> 2 ячейка</td> <br />
<td width="50"> 3 ячейка</td> <br />
</tr><br />
<tr> <br />
<td height="35" width="50"> 4 ячейка</td> <br />
<td width="50"> 5 ячейка</td> <br />
<td width="50"> 6 ячейка</td> <br />
</tr><br />
</table>

И вот результат:


1 ячейка 2 ячейка 3 ячейка
4 ячейка 5 ячейка 6 ячейка

Ещё пример:
<table border="1"><br />
<tr> <br />
<td height="75" width="70" bgcolor="#CD853F"> 1 ячейка</td> <br />
<td width="70" bgcolor="#FFD700"> 2 ячейка</td> <br />
<td width="70" bgcolor="#CD853F"> 3 ячейка</td> <br />
</tr><br />
</table>

И вот результат:

1 ячейка 2 ячейка 3 ячейка

Ещё один пример:
<table border="1"><br />
<tr> <br />
<td height="35" width="50" bgcolor="#CD853F"> 1 ячейка</td> <br />
<td width="50" bgcolor="#FFD700"> 2 ячейка</td> <br />
<td width="50" bgcolor="#CD853F"> 3 ячейка</td> <br />
</tr><br />
<tr> <br />
<td height="35" width="50" bgcolor="#FFD700"> 4 ячейка</td> <br />
<td width="50" bgcolor="#CD853F"> 5 ячейка</td> <br />
<td width="50" bgcolor="#FFD700"> 6 ячейка</td> <br />
</tr><br />
</table>

И вот результат:


1 ячейка 2 ячейка 3 ячейка
4 ячейка 5 ячейка 6 ячейка


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

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

Очевидно, что если вы задаете ширину каждого столбца, указывать общую ширину таблицы не нужно, она будет равняться сумме всех столбцов

В этом примере мы зададим ширину столбцов (ячеек) в процентах:
<table border="1" width="500"><br />
<tr> <br />
<td width="50%"> 1 ячейка</td> <br />
<td> 2 ячейка</td> <br />
<td> 3 ячейка</td> <br />
</tr><br />
</table>

И вот результат:

1 ячейка 2 ячейка 3 ячейка

В нашем примере мы задали для ячейки ширину в 50% это значит, что на остальные ячейки у нас осталось еще 50 %, т.е. сумма их ширин не должна превышать 50 %. Почему? Простая арифметика: в сумме это все должно равняться 100%. Считаем: 100 – 50 = 50.

Ещё один пример:
<table border="1" width="500"><br />
<tr> <br />
<td width="50%"> 1 ячейка</td> <br />
<td> 2 ячейка</td> <br />
<td> 3 ячейка</td> <br />
</tr><br />
<tr> <br />
<td width="50%"> 4 ячейка</td> <br />
<td> 5 ячейка</td> <br />
<td> 6 ячейка</td> <br />
</tr><br />
</table>

И вот результат:


1 ячейка 2 ячейка 3 ячейка
4 ячейка 5 ячейка 6 ячейка


Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:
для этого воспользуемся тегом: style="text-align:center"
<table border="1" width="500" style="text-align:center"><br />
<tr> <br />
<td> 1 ячейка</td> <br />
<td> 2 ячейка</td> <br />
<td> 3 ячейка</td> <br />
</tr><br />
</table>

И вот результат:

1 ячейка 2 ячейка 3 ячейка

Ещё один пример:
<table border="1" width="500" style="text-align:center"><br />
<tr> <br />
<td> 1 ячейка</td> <br />
<td> 2 ячейка</td> <br />
<td> 3 ячейка</td> <br />
</tr><br />
<tr> <br />
<td> 4 ячейка</td> <br />
<td> 5 ячейка</td> <br />
<td> 6 ячейка</td> <br />
</tr><br />
</table>

И вот результат:


1 ячейка 2 ячейка 3 ячейка
4 ячейка 5 ячейка 6 ячейка

Но не забывайте,что атрибут align может принимать не только center, а так же еще значения right и left

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник HTML для начинающих: Задание ширины и высоты для таблицы с помощью атрибутов WIDTH и HEIGHT | LoRaLaRa - Дневник LoRaLaRa | Лента друзей LoRaLaRa / Полная версия Добавить в друзья Страницы: раньше»