Таблицы на дайри. — @дневники: асоциальная сеть

20:45 Таблицы на дайри.

Для создания таблицы используются теги и их атрибуты. Позволю себе напомнить, что теги пишутся в треугольных скобках. Собственно, первое «слово» после открывающей скобки и есть сам тег, а то, что указывается через пробел — атрибуты тега (что-то вроде описания). Например тег img — тег картинки, атрибут scr — какой именно (адрес). Значения атрибутов (в приведенном примере — адрес картинки) указывают после знака равно в кавычках. В общем случае это выглядит так: <тег_пробел_атрибут="значение_атрибута"></закрывающий_тег>
Если у тега атрибутов несколько (например, адрес картинки, ширина, высота и прочее), они отделяются друг от друга пробелом. Один атрибут может использоваться с разными тегами.
Для того чтобы создать таблицу, надо, во-первых, обозначить начало и конец таблицы. Для этого используется тег <table> в начале таблицы и закрывающий тег </table> в конце.

Далее между этими тегами располагаем основную часть таблицы. Таблицы создаются построчно, по горизонтали, с помощью еще двух тегов: кода строки <tr> и кода ячейки <td>. В начале строки ставим <tr> потом пишем <td>, вносим данные первой ячейки этой строки, и ставим тег </td>. Повторяем этот порядок для остальных ячеек строки. В конце строки ставим закрывающий тег </tr>.
Например, для таблицы из 3 столбцов и 3 строк код выглядит так:

<table>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Как видите, по умолчанию таблица отображается без границ. Они задаются атрибутом border. Допустим, мы хотим границу для таблицы толщиной в 2 пикселя. Код будет выглядеть так:

<table border="2">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Хотя таблица и создается построчно, но число столбцов можно указать с помощью атрибута cols. Тогда таблица быстрее загрузится.

<table cols="3" border="2">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Раз уж мы сделали границу, самое время выбрать ей цвет. Цвет границы задаётся атрибутом bordercolor:

<table border="2" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Теперь к этой рамочке можно применить стили. читать дальшеСтили прописываются как значения атрибута style, после знака "=" и в кавычках, как и в случае других атрибутов. Но так как стилей слишком много, они объединяются в дополнительные рубрики — свойства, и уже для каждого свойства задаются значения. Для описания границы нам нужно свойство border-style. Оно позволяет, например, сделать двойную линию. Но по умолчанию на дайри две линии в таблицах "схлопываются" в одну, поэтому, чтобы увидеть разницу, придется прописать еще одно стилевое свойство border-collapse.
В случае, если мы задаем два и более стилевых свойств, "style=" пишем один раз, после знака "=" открываем кавычки, пишем наши свойства, разделяя их точкой с запятой и пробелом, и закрываем кавычки. А значения свойствам указываем через двоеточие. Чтобы не запутаться в "="и кавычках.))

<table style="border-style: double; border-collapse: separate" border="2" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Другие варианты рамки:

<table style="border-style: dotted" border="4" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

<table style="border-style: dashed" border="4" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

<table style="border-style: ridge" border="8" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

<table style="border-style: groove" border="4" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Еще с помощью стилей можно прописать толщину границ между ячейками. Но, к сожалению, это надо делать для каждой ячейки.

<table border="2" bordercolor="green">
<tr><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td></tr>
<tr><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td></tr>
<tr><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td><td style="border-width:2px;">текст ячейки</td></tr>
</table>

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Тут самое время задать цвет фона для всей таблицы. В этом нам поможет атрибут bgcolor. Например,

<table border="2" bordercolor="green" bgcolor="silver">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr></table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Значения цветов рекомендуется брать из таблицы безопасных цветов.
Можно на этом не останавливаться и задать фоновое изображение для таблицы. Для этого сначала заливаем желаемое изображение в свою БИ, затем обрезаем ссылку на изображение. У нас должно остаться /userdir/ещецифры.png или /userdir/ещецифры.gif. Наконец, эту обрезанную ссылку вставляем вместо слова ССЫЛКА в код вида:

<table style="background-image:url('ССЫЛКА')" border="2" bordercolor="green" >
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</td></tr></table>

Например, я использовала текстуру:

Ссылка на это изображение, обрезанная: /userdir/1/5/0/3/1503064/85693304.png

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" border="2" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Теперь можно задать расстояние между ячейками таблицы. Для этого понадобится уже знакомое нам свойство border-collapse и атрибут cellspacing:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); border-collapse: separate" border="2" bordercolor="green" cellspacing="5">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Далее таблице можно прописать ширину. Если этого не сделать, то таблица подгоняется под размер содержимого. Ширину задаём атрибутом width (как для картинок), указывая в пикселях (если нужно, чтобы таблица отображалась на всех экранах одинаково) или в процентах (если хотим, чтобы она подстраивалась под размер окна).

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" border="2" bordercolor="green" width="80%">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Думаю, вы обратили внимание, что в отличие от текста, таблица по умолчанию выравнивается по левому краю, а не по ширине. Изменить это можно двумя способами:
Если нужно просто выровнять таблицу по правому краю или центру, достаточно просто выделить ее и нажать нужную кнопку в редакторе. Если нужно заставить текст обтекать таблицу справа или слева, можно воспользоваться атрибутом align.

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" border="2" bordercolor="green" width="80%" align="left">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Если же прописать align="center", то таблица только выровняется по центру. Тогда как же сделать обтекание текстом с двух сторон? Например, так:
1. Создаем нужную нам таблицу. Допустим, эту:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" border="2" bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

2. Создаем таблицу в одну строку из трех ячеек.

<table>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

3. В первую (левую) ячейку пишем текст, который хотим расположить слева.
4. В третью (правую) ячейку пишем текст, который хотим расположить справа.
5. Во вторую (среднюю) ячейку вставляем таблицу из пункта 1. Получаем вложенную таблицу.

<table>
<tr><td>«левый» текст 
«левый» текст 
«левый» текст 
«левый» текст </td><td><table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" border=2 bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table></td><td>«правый» текст 
«правый» текст 
«правый» текст 
«правый» текст </td></tr>
</table>

Выглядит так:

«левый» текст
«левый» текст
«левый» текст
«левый» текст

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

«правый» текст
«правый» текст
«правый» текст
«правый» текст

Ограничиваться тремя строками, конечно, необязательно, можно создавать конструкции любой степени сложности. Кстати, я везде пишу «текст», но мы же помним, что в html-редакторе все — текст и содержимое ячеек можно заменить любым кодом))
Также можно увидеть, что текст в нашей таблице некрасиво прилипает к левой границе ячейки. Чтобы читать было комфортнее, зададим отступ в, скажем, 8 пикселей. Для этого используется атрибут cellpadding:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png')" width=80% border=2 bordercolor="green" cellpadding=8>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Удобно, что отступы добавляются сразу во всех ячейках таблицы. Но, как видите, добавляются они со всех сторон, что при большом количестве строк не лучший вариант.

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

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%" border="2" "bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Теперь поработаем со строками. Можем задать строке отличный от всей таблицы цвет с помощью стилевого свойства background-color:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%" border="2" "bordercolor="green">
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr  style="background-color: #669999"><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Чтобы выделить жирным текст одной строки таблицы, достаточно заменить в этой строке все td на th.

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%;" border="2" "bordercolor="green">
<tr><th>текст ячейки</th><th>текст ячейки</th><th>текст ячейки</th></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><th>текст ячейки</th><th>текст ячейки</th><th>текст ячейки</th></tr>
</table>

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Но можно применить к содержимому каждой ячейки тег <b></b>, равно как и любые другие теги оформления записей.

Еще нам может пригодится объединение ячеек.
Объединять ячейки можно по горизонтали и вертикали. Если мы хотим объединить несколько ячеек одной строки в одну, используем атрибут colspan. При этом если мы, к примеру, объединяем три ячейки, то и записываем только эту объединенную ячейку, то есть не <tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>, а <tr><td colspan="3">текст ячейки</td></tr>. .

<table style="background-image:url('//userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%;" border="2" "bordercolor="green">
<tr><td colspan="3">текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</th></tr>
</table>

Результат:

текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Или при объединении двух ячеек — прописываем одну объединенную ячейку и одну обычную.

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%;" border="2" "bordercolor="green">
<tr><td colspan="2">текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</th></tr>
</table>

Результат:

текст ячейки		текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

По вертикали все аналогично, только атрибут rowspan.

Объединение 2 ячеек:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%;" border="2" "bordercolor="green">
<tr><td rowspan="2">текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td><td>текст ячейки</th></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки
текст ячейки	текст ячейки	текст ячейки

Объединение 3 ячеек:

<table style="background-image:url('/userdir/1/5/0/3/1503064/85693304.png'); text-align:center" width="80%;" border="2" "bordercolor="green">
<tr><td rowspan="3">текст ячейки</td><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td></tr>
<tr><td>текст ячейки</td><td>текст ячейки</td></tr>
</table>

Результат:

текст ячейки	текст ячейки	текст ячейки
	текст ячейки	текст ячейки
	текст ячейки	текст ячейки

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

Получим вот такой код, вместо нескольких строк, как в примерах выше:

Надеюсь, эта информация была вам полезной))

запись создана: 07.05.2018 в 14:04

@темы: Полезное