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


Строим таблицу(урок от Джулии) 25-08-2014 13:49 к комментариям - к полной версии - понравилось!

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

Строим таблицу(урок от Джулии)

Для просмотра используйте прокрутку справа.
СТРОИМ ТАБЛИЦУ

Построим простейшую таблицу, состоящую из одной строки и двух столбцов.

<table> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr><br /> </table>






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


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

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





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



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




















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


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

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

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

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












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



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

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

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











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


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

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










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


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

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













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

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



















ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
Помощь блоггеру



Серия сообщений "HTML":

Часть 1 - 33 полезные кнопочки
Часть 2 - самые необходимые ТЕГИ для оформления записей
...
Часть 14 - Теги для ЖЖ
Часть 15 - Визуальный "Редактор HTML кода"
Часть 16 - Строим таблицу(урок от Джулии)
Часть 17 - рамочка моя
Часть 18 - ВСЕГДА ПОД РУКОЙ
...
Часть 20 - Делаем контейнер для окошек ЛИру с любыми кодами
Часть 21 - МОИ ПОДПИСИ на Лирушке + КУРСОРЫ(вверху)
Часть 22 - подсказка "КАК ПЕРЕНЕСТИ ЗАПИСИ из БЛОГА в ДНЕВНИК" часть2




Серия сообщений "коды,формулы":

Часть 1 - 33 полезные кнопочки
Часть 2 - О кодах видео с ютуб
...
Часть 9 - Шпаргалочка по тегам Берём к себе в цитатник.
Часть 10 - Как можно расположить картинки в тексте УРОК
Часть 11 - Строим таблицу(урок от Джулии)
Часть 12 - рамочка моя
Часть 13 - ВСЕГДА ПОД РУКОЙ
Часть 14 - Оформление постов. Теги. Ответы на вопросы.
Часть 15 - Делаем контейнер для окошек ЛИру с любыми кодами


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


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

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