25.02.2012, 20:27

Работа с таблицами в html


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

Начнём пожалуй с создания таблицы .
Для создания таблицы нам нужны будут команды :
<table> </table> - создаёт таблицу
border="1" - создаёт границы таблицы , если поставить 0 , то границ не будет
<tr> </tr> - создаёт ряд в таблице
<td> </td> - создаёт ячейку в таблице
Рассмотрим пример таблицы :
Code
<table border="1">
<tr>
<td>Мы сделали 4 ячейки ?</td>
<td>Мы сделали 2 ряда ?</td>
</tr>
<tr>
<td>Да!</td>
<td>Да!</td>
</tr>
</table>

Вот что у нас получилось :

Мы сделали обычную табличку .
Теперь попробуем её приукрасить .
Тут нам понадобятся новые команды :
cellspacing="0" - делает расстояние между ячейками
cellpadding="8" - делает расстояние между ячейкой и тем , что находится в ней
style="" - задаёт стиль
background-color: - создаёт цвет фона
color: - создаёт цвет текста
  - заполняет пустое место внутри ячейки
Теперь посмотрим как это можно применить на таблице :
Code
<table border="1" cellspacing="0"
cellpadding="8" style="background-color:blue; color:red">
<tr>
<td>Мы сделали 4 ячейки ?</td>
<td>   </td>
</tr>
<tr>
<td>Да</td>
<td>А тут чё пусто ? О_О</td>
</tr>
</table>

Вот что получилось :

Разноцветная табличка ! Конечно вы можете задать свой цвет , сменив blue и red на свой цвет .

Теперь мы узнаем - как изменить размер таблицы .
Тут нужны команды :
width - изменяет ширину таблицы
height - изменяет высоту таблицы
И как же это применить ? Надо просто напросто к таблице созданной ранее дописать команды width и height, вот так :
Code
<table border="1" cellspacing="0" cellpadding="15" width="90%" height="130">  
<tr>
<td>Мы сделали 6 ячеек ?</td>
<td>Мы сделали 3 ряда ?</td>
<td style="background-color:yellow">Мы изменили размер таблицы ? </td>
</tr>
<tr>
<td>Да</td>
<td>Да</td>
<td>Ну наверно </td>
</tr>
</table>

Вот как это выглядит :

У нас всё получилось !

Теперь научимся изменять размер ячеек .
Новых команд тут не появляется , надо лишь запомнить как применять команды width и height для ячеек .
Это делается вот так :
Code
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td width="200" height="100">Мы сделали 4 ячейки ?</td>
<td>Да !</td>
</tr>
<tr>
<td>Мы изменили размер ячеек ?</td>
<td>Да !</td>
</tr>
</table>

Вот как это смотрится :

Теперь мы научились изменять размер ячеек.

Теперь приступим к выравниванию текста в ячейке таблицы .
Мы уже знаем из прошлых уроков что делает команда align=""( для тех кто не помнит - Выравнивает текст. Для этого тега существуют значения , которые пишутся между кавычек: "left", "right", "center" как вы могли догадаться, эти значения выравнивают текст по левой стороне, по правой и по центру. )теперь остаётся , только научиться применять эту команду к таблице.
Это делается вот так :
Code
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td align="left">Лево</td>
<td align="right">Право</td>
<td align="center">Центр</td>
</tr>
</table>

Вот что из этого вышло :

Текст сместился , значит всё сделано правильно
Теперь сместим текст вертикально .
Тут нам понадобится команда valign- делает вертикальное выравнивание текста . Для неё есть подкоманды : top , bottom и middle. они смещают текст вверх , вниз и посередине .
Теперь научимся их применять :
Code
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td valign="top">Вверх</td>
<td valign="bottom">Вниз</td>
<td valign="middle">Посередине</td>
</tr>
</table>

Вот что у нас получилось :

Всё получилось !

Теперь научимся делать заголовки таблиц .
Появляется новая команда :
<th> </th> - делает заголовок таблицы .
Попробуем применить эту команду :
Code
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
</tr>
<tr>
<td>ляля</td>
<td>ляля</td>
<td>ляля</td>
</tr>
<tr>
<td>ляля</td>
<td>ляля</td>
<td>ляля</td>
</tr></table>

Вот что из этого кода вышло :

Всё правильно !

Теперь мы научимся изменять расположение таблицы .
Команды новых нет , но в коде вы сможете заметить команду bgcolor, эта команда не новая , а сокращение от background-color.
Посмотрим как же изменять расположение таблицы :
Code
<table align="center" width="220" bgcolor="#006699">
<tr height="220">
<td>
<p>Центр</p>
</td>
</tr>
</table>
  <table align="left" width="220" height="220" bgcolor="#cc0000">
  <tr>
  <td>
  <p>Лево</p>
  </td>
  </tr>
  </table>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>Право</p>
</td>
</tr>
</table>

Вот как это выглядит :

Теперь вы умеете и это.

Подводим итоги:
Мы научились: создавать таблицы, изменять размер таблицы, изменять размер ячеек в таблице, выравнивать текст в ячейке таблицы, делать заголовки таблиц, изменять расположение таблицы.

Спасибо за внимание !



Источник/Автор: http://portal-naruto.ru

Категория: HTML, CSS, JS, JQ | Добавил: Silver (25.02.2012) Просмотров: 2410 | Рейтинг: 4.8/5
Всего комментариев: 2
0  
1 antisept -Infoscript Team-  (26.02.2012 13:59) [Материал]
Аватар пользователя
Очень кстати. Довольно часто задают вопрос: "как создать таблицу?" smile

0  
2 Voker -Infoscript Team-  (10.03.2012 18:34) [Материал]
Аватар пользователя
Да статья полезная!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]