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


Строим таблицы 18-04-2012 14:57 к комментариям - к полной версии - понравилось!

Это цитата сообщения MANGIANA Оригинальное сообщение

Строим таблицы - урок от Джулии


[показать]

Помощьблоггеру

[показать]
СТРОИМ ТАБЛИЦУ. УРОК ОТ ДЖУЛИИ

[показать]
Построим простейшую таблицу, состоящую из одной строки и двух столбцов.
<table>
<tr>
<td>Текст1</td>
<td>Текст2</td>
</tr>
</table>

Текст1Текст2


Теперь добавим рамку к нашей таблице. Для этого нужно в тег <table> добавить border="3" Этот параметр определяет ширину бордюра таблицы. Усли нужна рамка толщиной 10 пиксель то 3 меняем на 10.
А если мы хотим сделать нашу таблицу на каком-нибудь фоне, то добавим к таблице параметр background и укажем адрес нашего фона

<table border="3" background="http://s60.radikal.ru/i170/0905/cf/597b1b96c0fc.jpg">
<tr>
<td>Текст1</td>
<td>Текст2</td>
</tr>
</table>
Текст1Текст2



Теперь создадим вот такую таблицу

Первая строка. Текст1Первая строка. Текст2
Последняя строка. Текст1Последняя строка. Текст2
Текст1Текст2


<table border="1" width="100%">
<thead align="left">
<tr>
<td>Первая строка. Текст1</td>
<td>Первая строка. Текст2</td>
</tr>
</thead>
<thead align="right">
<tr>
<td>Последняя строка. Текст1</td>
<td>Последняя строка. Текст2</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>Текст1</td>
<td>Текст2</td>
</tr>
</tbody>
</table>
В первой строке текст размещен слева, в последней строке - справа, а в центральной строке - посередине

Таблица с заголовками

Тег <th> предназначен для создания одной ячейки таблицы,
которая обозначается как заголовочная.
Располагается этот тег только внутри тега <tr>

<table border="1" width="70%">
<tbody align="center">
<tr>
<th>Заголовок1</th>
<th>Заголовок2</th>
</tr>
<tr>
<td>Текст1</td>
<td>Текст2</td>
</tr>
</tbody>
</table>

Заголовок1Заголовок2
Текст1Текст2



Объеденим несколько ячеек таблицы. Для этого в теге <td> нужно указать colspan - объеденяет
горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

<table border="1" width="70%">
<tbody align="center">
<tr>
<td colspan="2" rowspan="1">Текст1</td>
</tr>
<tr>
<td>Текст2</td>
<td>Текст3</td>
</tr>
</tbody>
</table>

Текст1
Текст2Текст3


Объеденим 2 ячейки первого столбца в одну ячейку

<table border="1" width="70%">
<tbody align="center">
<tr>
<td colspan="1" rowspan="2">Текст1</td>
<td>Текст2</td>
</tr>
<tr>
<td>Текст3</td>
</tr>
</tbody>
</table>

Текст1Текст2
Текст3


Параметры тега <table> cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между
ячейками.

<table border="1" cellspacing="10" cellpadding="30">
<tbody align="center">
<tr>
<td>Текст1</td>
<td>Текст2</td>
</tr>
<tr>
<td>Текст3</td>
<td>Текст3</td>
</tr>
</tbody>
</table></td></tr></table>

Текст1Текст2
Текст3Текст3

Для тех, кому лень вникать во все эти премудрости, можете просто скопировать код вот такой рамки




ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
Желаю удачи!
Источник:
вверх^ к полной версии понравилось! в evernote


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

Дневник Строим таблицы | kitaenish - Дневник kitaenish | Лента друзей kitaenish / Полная версия Добавить в друзья Страницы: раньше»