Сразу скажу, что идею взяла у
Alexeevna , ну и посмотрела другие материалы по этому поводу.
В общем, таблица делается так. В первую очередь открываем границу таблицы table, затем открываем строку tr, потом (ЕСЛИ НАДО) открываем заголовок (если НЕ НАДО - пропускаем этот тег), и наконец открываем строку td. Немного напоминает формулы в математике, когда решали примеры со скобками типа z=(x+y) + (a+b) и т.д., так вот, там тоже скобки надо помнить где закрывать. В принципе Ли.ру сам автоматически дописывает тег если таблица у вас несложная.
<table> это граница таблицы, она может быть толстой, тонкой, цветной, пунктирной, или никакой. В конце таблицы тег замыкается </table>
<tr> это строка. По ее окончании тег замыкается </tr>
<th> Это выделенная ячейка, как правило, используется в заголовках. Вообще-то она не нужна. Замыкается </th> и, как правило, внутри отдельной строки если заголовок сверху
<td> это простая ячейка, аналогично замыкается </td>
Для примера, вот таблица из двух строк и двух ячеек в каждой строке:
| Заголовок |
|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Или вот так, похулиганим:
| Заголовок th |
|---|
| ВАШ ТЕКСТ 1 |
| ВАШ ТЕКСТ 2 | ВАШ ТЕКСТ 3 |
| ВАШ ТЕКСТ 4 | ВАШ ТЕКСТ 5 | ВАШ ТЕКСТ 6 |
Обратите внимание на код, например, на желтом фоне написана вся первая строка, и вы видите как код ячейки и строки закрывается, а подчеркнуты - отдельно ячейка 1, ячейка 2 и ячейка 3:
Все что ниже - это будет писаться, как правило, сразу после слова table и пробела. Туда впишется и ширина, и граница, и цвет, и многое другое.
В принципе то же можно вписать и для отдельной ячейки, если она должна отличаться от таблицы, и для ячейки-заголовка.
Если код большой, то и писать надо много после пробела, например:
Толщина. Чтобы таблица была с какой-то толщиной рамки, после слова table надо написать border="1" или другую цифру (тогда граница будет ооочень толстой). Значение ноль - это вообще никакой границы. Смотрим:
Если сделать толщину примерно border="30" и выше, а также вписать фон ячейки, то туда можно поместить картинку и она будет смотреться как будто в рамке (см. выше, с собачкой). Я вписала table border="30" bgcolor="brown"
Как вариант рамки без внешней границы:
BORDER="1" RULES="ALL" FRAME="VOID"
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Как вариант рамки, но внутри линий нет (браузер Опера видит везде толщину 1:
BORDER="1" RULES="NONE" FRAME="BOX"
| Ячейка 1 | Ячейка 2 | | Ячейка 3 | Ячейка 4 |
| Попробовала вписать толщину побольше BORDER="10" RULES="NONE" FRAME="BOX"
Но Опера все равно это видит как толщину 1. А у вас тоже?
| Ячейка 1 | Ячейка 2 | | Ячейка 3 | Ячейка 4 |
|
Объединение Количество ячеек может быть неравное. Например, rowspan означает сколько строк мы объединили по вертикали, а colspan - по горизонтали.
| td rowspan="2" | Ячейка 1 | Ячейка 2 | | Второй столбик | Второй столбик тоже |
| | td colspan="2" | | Ячейка 1 | Ячейка 2 | | Ячейка 3 | Ячейка 4 |
|
Можно вообще сделать сложную таблицу, например
вот
Цвет фона. Фон таблицы можно сделать цветом, например table bgcolor="#eeeeee" означает серый цвет фона, а можно сделать фон-картинку table background="//img1.liveinternet.ru/images/attach/b/0/10841/10841288_razshar09.gif"
Можно сделать фон не всей таблицы, а какой-то ячейки, соответственно будет написано td bgcolor="#КОД ЦВЕТА" или table background="АДРЕС КАРТИНКИ"
| Ячейка 1 | Ячейка 2 с фоном - картинкой | Ячейка 3 |
Для таблицы в целом и ячеек далее коды аналогичны, а вот строки почему-то не все браузеры могут так раскрашивать.
Внимание! Цвет, шрифт, размер букв, которые отличаются от настроек дневника, надо заново указывать в каждой ячейке! Иначе тег (код) автоматически закрывается когда закрывается ячейка. Например, у меня в настройках черный цвет букв, и если я захочу в таблицу вписывать красные, зеленые, желтые буквы, мне надо это вписывать в каждую ячейку по отдельности.
Цвет рамки bordercolor="99CCFF" это код цвета всей рамки, вместо 99CCFF конечно пишете нужный цвет. Пример:
| table border="20" bordercolor="#99CCFF" |
|
Можно раскрасить внутреннюю и внешнюю стороны рамки. Светлый, он же верхний цвет bordercolorlight. Нижний, он же темный цвет в этом дуэте цветов - bordercolordark. Но браузер Опера у меня этого не видит,зато видит так:
Ключевое слово: groove
Более ТЕМНЫЙ цвет рамки СВЕРХУ
Более ТЕМНЫЙ цвет рамки СВЕРХУ:
table style="border-width:12px; border-color:#9999FF; border-style:groove; " |
Ключевое слово: ridge
Более СВЕТЛЫЙ цвет рамки СВЕРХУ
Более СВЕТЛЫЙ цвет рамки СВЕРХУ:
table style="border-width:12px; border-color:#66CC66; border-style:ridge; " |
Эти параметры замените по своему вкусу: Ширина width:12px, выбранный цвет #9999FF
Можно раскрасить хоть все четыре грани рамки, тогда вместо table пишем table style="BORD... (далее все в кавычках, а параметры разделяются точкой с запятой)
BORDER-LEFT цвет левой полоски, BORDER-TOP - верхней, BORDER-BOTTOM - нижней, BORDER-RIGHT - правой полоски.
3px - толщина полоски, можно делать толще и тоньше (от нуля до бесконечности)
solid - команда слитной полоски
| style="border:5px dashed #000" |
| | style="border:3px dotted #000" |
| | style="border:3px double #000" |
|
|
В принципе есть похожие коды (теги) не только для таблиц, но и в целом для поля цитат, для поля абзацев, для поля div, span, font и т.д. Для примера, предыдущий код можно записать еще и так, скопируйте просто код ниже и вместо слов ВАШ ТЕКСТ вставьте ваш текст
Ну или то же самое, но с картинкой. Например, здесь картинка справа. Можно сделать ее и слева, и сверху, и снизу. Просто над тем кодом что выше припишите то, что находится в поле ниже:
А right это команда делать картинку справа. Поменяйте ее по своему вкусу слева (left)
Да, вот так выглядит рамочка, когда команда писать картинку слева. Вот код:
Особые возможности
1. Подписать картинку с помощью табличного тега (кода) можно, например, так:
Важно: угадать с размерами ширины (width) и длины (height), указать выравнивание текста: справа (valign="right"), слева (valign="left"), сверху (valign="top") или снизу (valign="bottom"). Покрасить буквы. cellpadding="0" cellspasing="0" -это отступы текста по ширине и высоте от края рамки. Но вообще, мне кажется, удобнее использовать тег div
2. Разделить пост на две части можно так:
Пишется таблица для одной строки и трех ячеек, центральная ячейка пишется: td width="2" bgcolor="ЦВЕТ РАЗДЕЛИТЕЛЯ НАПР. #000000". Конечно в тегах < >
В принципе это пустые ячейки, и разделить так можно не только на две, но и хоть на двадцать две части. А ширину (width="2") тоже можно поменять хоть на width="22", хоть на "222". Вот разница:
| Итак, правее будет разделитель width="3" | | Правее будет разделитель width="0" | | Правее будет разделитель width="33" | |
3. Если хотите убрать текст внутри таблицы, то под кат текст можно убрать как обычно написав [more] Однако следует "закрыть" этот код (тег) [/more] чтобы было "красиво" если таблица имеет какой-то фон.
Вот разница:
Конечно какой из двух вариантов писать - выбирать только вам в зависимости от желания.
