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

Уроки HTML для начинающих.
Таблица HTML (урокN2)

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

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

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

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

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

---

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

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

1 ячейка

2 ячейка

3 ячейка

Пример:

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

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

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

Ещё пример:

<table border=1>
<tr> 
<td height="75" width="70" bgcolor="#CD853F"> 1 ячейка</td> 
<td width="70" bgcolor="#FFD700"> 2 ячейка</td> 
<td width="70" bgcolor="#CD853F"> 3 ячейка</td> 
</tr>
</table>

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

1 ячейка

2 ячейка

3 ячейка

Ещё один пример:

<table border=1>
<tr> 
<td height="35" width="50" bgcolor="#CD853F"> 1 ячейка</td> 
<td width="50" bgcolor="#FFD700"> 2 ячейка</td> 
<td width="50" bgcolor="#CD853F"> 3 ячейка</td> 
</tr>
<tr> 
<td height="35" width="50" bgcolor="#FFD700"> 4 ячейка</td> 
<td width="50" bgcolor="#CD853F"> 5 ячейка</td> 
<td width="50" bgcolor="#FFD700"> 6 ячейка</td> 
</tr>
</table>

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

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

---

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

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

---

В этом примере мы зададим ширину столбцов (ячеек) в процентах:

<table border=1 width="500">
<tr> 
<td width="50%"> 1 ячейка</td> 
<td > 2 ячейка</td> 
<td > 3 ячейка</td> 
</tr>
</table>

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

1 ячейка

2 ячейка

3 ячейка

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

Ещё один пример:

<table border=1 width="500">
<tr> 
<td width="50%"> 1 ячейка</td> 
<td > 2 ячейка</td> 
<td > 3 ячейка</td> 
</tr>
<tr> 
<td width="50%"> 4 ячейка</td> 
<td > 5 ячейка</td> 
<td > 6 ячейка</td> 
</tr>
</table>

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

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

---

Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:
для этого воспользуемся тегом: style="text-align:center"

<table border=1 width="500" style="text-align:center">
<tr> 
<td > 1 ячейка</td> 
<td > 2 ячейка</td> 
<td > 3 ячейка</td> 
</tr>
</table>

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

1 ячейка

2 ячейка

3 ячейка

Ещё один пример:

<table border=1 width="500" style="text-align:center">
<tr> 
<td > 1 ячейка</td> 
<td > 2 ячейка</td> 
<td > 3 ячейка</td> 
</tr>
<tr> 
<td > 4 ячейка</td> 
<td > 5 ячейка</td> 
<td > 6 ячейка</td> 
</tr>
</table>

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

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

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

---

• Атрибуты таблицы. ЗДЕСЬ.
• Все цвета интернета ЗДЕСЬ
• Подобрать HTML код в ручную ЗДЕСЬ

На этом урок(N2) заканчуется))Что не понятно пишите,будем разбераться вместе.



Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

.