[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

  • Страница 1 из 1
  • 1
Форум » Интернет » Всё для создания WEB сайта » Веб-строительство » Таблицы html в примерах
Таблицы html в примерах
ingvarr
(65528) Вне сайта
Дата: 29.10.2011, 10:49:31 | Сообщение № 1
admin
Репутация: 734
Награды: 117


Заголовок таблицы
Заголовок 1
Заголовок 2
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4


Code
<TABLE border=4 cellspacing=3>
   <CAPTION> Заголовок таблицы </CAPTION>
   <TR><TH bgcolor="white">Заголовок 1
   <TH bgcolor="white">Заголовок 2
   <TR><TD>Ячейка 1 <TD>Ячейка 2
   <TR><TD>Ячейка 3 <TD>Ячейка 4
   </TABLE>
Ответить



ingvarr
(65528) Вне сайта
Дата: 29.10.2011, 10:50:32 | Сообщение № 2
admin
Репутация: 734
Награды: 117


Заголовок таблицы
Заголовок 1
Заголовок 2
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5


Code
<TABLE border=4 cellspacing=0 >
  <CAPTION>Заголовок таблицы </caption>
  <TR><TD bgcolor="white">Заголовок 1
  <TD bgcolor="white">Заголовок 2
  <TR><TD rowspan=3 bgcolor="white">Ячейка 1
  <TD>Ячейка 2
  <TR><TD>Ячейка 3
  <TR><TD>Ячейка 4
  <TR><TD colspan=2 bgcolor="white" align="center">Ячейка 5  
  </table>
Ответить
ingvarr
(65528) Вне сайта
Дата: 29.10.2011, 10:51:41 | Сообщение № 3
admin
Репутация: 734
Награды: 117

Заголовок 1
Заголовок 2
Заголовок 3
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5


Code
<TABLE border=4 cellspacing=0 >
  <TR><TD bgcolor="white">Заголовок 1
  <TD bgcolor="white">Заголовок 2
  <TD bgcolor="white">Заголовок 3
  <TR><TD rowspan=4 colspan=2 bgcolor="white">Ячейка 1
  <TR><TD>Ячейка 2
  <TR><TD>Ячейка 3
  <TR><TD>Ячейка 4
  <TR><TD colspan=3 bgcolor="white" align="center">Ячейка 5  
  </table>
Ответить
ingvarr
(65528) Вне сайта
Дата: 29.10.2011, 10:53:15 | Сообщение № 4
admin
Репутация: 734
Награды: 117

Одна ячейка


Code
<TABLE border=4 cellspacing=3 cellpadding=10>
  <TR><TD bgcolor="white">Одна ячейка
  </table>
Ответить
ingvarr
(65528) Вне сайта
Дата: 29.10.2011, 10:55:43 | Сообщение № 5
admin
Репутация: 734
Награды: 117
Элемент <TABLE>

Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.

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

По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C - таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты:
bgcolor
Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.
<TABLE bgcolor=цвет>
background
Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.
<TABLE background=URL файла изображения>
bordercolor
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLЕ border=число bordercolor=цвет >
bordercolorlight
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLE border=число bordercolorlight=цвет>
bordercolordark
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLE border=число bordercolordark=цвет>
align
Этот атрибут задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .
<TABLE align= способ >
width
Этот атрибут задает ширину таблицы в пикселях или процентах от всего окна.
<TABLE width=число или %>
border
Этот атрибут задает ширину внешнего обрамления таблицы в пикселях.
<TABLE border=число >
cellspacing
Этот атрибут задает ширину внутреннего обрамления в пикселях.
<TABLE сellspacing=число >
сellpadding
Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселях.
<TABLE сellpadding=число >
summary
Этот необязательный атрибут задает краткое описание таблицы для некоторых браузеров.
<TABLE summary=описание >
rules
Этот атрибут задает линии между ячейками.
<TABLE rules=all >
none
Нет линий, значение используется по умолчанию.
groups
Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.
rows
Линии отображаются только между строками.
cols
Линии отображаются только между столбцами.
all
Линии отображаются между строками и столбцами.
frame
Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
<TABLE frame=void> Возможные значения:
void
Сторон нет. Это значение используется по умолчанию.
above
Только верхняя часть.
below
Только нижняя часть.
hsides
Только верхняя и нижняя часть.
vsides
Только левая и правая части.
lhs
Только левая часть.
rhs
Только правая часть.
box
Все четыре части.
border
Все четыре части.
id
Этот атрибут задает имя для ссылки.
<TABLE id=имя>

Элемент <COL>

Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты:
width
Этот атрибут задает ширину ячеек в колонке.
<COL width=число>
bgcolor
Этот атрибут задает цвет фона ячеек.
<СOL bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<СOL align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<СOL valign=значение>
id
Этот атрибут задает имя для ссылки.
<COL id=имя>
Элемент <COLGROUP>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты:
width
Этот атрибут задает ширину ячеек.
<COLGROUP width=число>
bgcolor
Этот атрибут задает цвет фона ячеек.
<COLGROUP bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<COLGROUP align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<COLGROUP valign=значение>
span
Этот атрибут задает количество колонок в группе.
<COLGROUP span=число>
width
Этот атрибут задает ширину ячеек в колонках.
<COLGROUP width=число>
id
Этот атрибут задает имя для ссылки.
<COLGROUP id=имя>

Элемент <THEAD>

Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки".
<THEAD ><TR ><TD >...<TD >...</THEAD>
bgcolor
Этот атрибут задает цвет фона ячеек.
<THEAD bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<THEAD align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<THEAD valign=значение>
id
Этот атрибут задает имя для ссылки.
<THEAD id=имя>

Элемент <TBODY>

Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы.
<TBODY ><TR ><TD >...<TD >...</TBODY>
bgcolor
Этот атрибут задает цвет фона ячеек.
<TBODY bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TBODY align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TBODY valign=значение>
id
Этот атрибут задает имя для ссылки.
<TBODY id=имя>

Элемент <TFOOT>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки".
<TFOOT ><TR ><TD >...<TD >...</THEAD>
bgcolor
Этот атрибут задает цвет фона ячеек.
<TFOOT bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TFOOT align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TFOOT valign=значение>
id
Этот атрибут задает имя для ссылки.
<TFOOT id=имя>
Начало строки: элемент <TR>

Элемент <TR> открывает строку определений ячеек и не требует конечного тэга, хотя такой элемент можно использовать для наглядности обозначения каждой строки, поддерживает атрибуты, которые задают стиль оформления всех ячеек в строке. Отдельные ячейки могут быть отформатированы иначе.
bgcolor
Этот атрибут задает цвет фона ячеек.
<TR bgcolor= цвет >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TR align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TR valign=значение>
id
Этот атрибут задает имя для ссылки.
<TR id=имя>

Заголовок таблицы: элемент <CAPTION>

Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id
- имя для ссылки.
<CAPTION> текст </CAPTION>

Ячейки заголовка: элемент <TH>

Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id
- имя для ссылки.
<TH атрибуты > текст заголовка
Ячейки с данными <TD>

Элемент <TD> определяет ячейку с данными
bgcolor
Этот атрибут задает цвет фона ячейки.
<TD bgcolor= цвет >
width
Этот атрибут задает ширину ячейки в пикселях или %.
<TD width= число или % >
height
Этот атрибут задает высоту ячейки в пикселях.
<TD height=значение>
rowspan
Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<TD rowspan=количество строк >
colspan
Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<TD colspan=количество колонок >
align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TD align= способ >
valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TD valign=значение>
nowrap
Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект &nbsp;
id
Этот атрибут задает имя для ссылки.
<TD id=имя>
Ответить



ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:21:43 | Сообщение № 6
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER>
            <TR>
                    <TD>A</TD> <TD>B</TD> <TD>C</TD>
            </TR>
            <TR>
                    <TD>D</TD> <TD>E</TD> <TD>F</TD>
            </TR>
</TABLE>


A B C
D E F
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:23:58 | Сообщение № 7
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER>
          <TR>
                  <TD>Item 1</TD>
                  <TD ROWSPAN=2>Item 2</TD>
                  <TD>Item 3</TD>
          </TR>
          <TR>
                  <TD>Item 4</TD> <TD>Item 5</TD>
          </TR>
  </TABLE>


Item 1 Item 2
Item 3 Item 4 Item 5
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:30:52 | Сообщение № 8
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER>
          <TR>
                  <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
          </TR>
          <TR>
                  <TD>A</TD> <TD>B</TD> <TD>C</TD>
          </TR>
          <TR>
                  <TD>D</TD> <TD>E</TD> <TD>F</TD>
          </TR>
  </TABLE>  

Head1 Head2 Head3
A B C
D E F
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:31:33 | Сообщение № 9
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER>
          <TR>
                  <TH COLSPAN=2>Head1</TH>
                  <TH COLSPAN=2>Head2</TH>
          </TR>
          <TR>
                  <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
          </TR>
          <TR>
                  <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
          </TR>
</TABLE>

Head1Head2
A B C D
E F G H
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:34:19 | Сообщение № 10
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER>
          <TR>
                  <TH COLSPAN=2>Head1</TH>
                  <TH COLSPAN=2>Head2</TH>
          </TR>
          <TR>
                  <TH>Head 3</TH> <TH>Head 4</TH>
                  <TH>Head 5</TH> <TH>Head 6</TH>
          </TR>
          <TR>
                  <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
          </TR>
          <TR>
                  <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
          </TR>
</TABLE>



Head1Head2
Head 3 Head 4Head 5 Head 6
A B C D
E FG H
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:35:22 | Сообщение № 11
admin
Репутация: 734
Награды: 117
ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10

Code
<TABLE BORDER=10>
          <TR>      <TD>Item 1</TD> <TD> Item 2</TD>
          </TR>
          <TR>      <TD>Item 3</TD> <TD>Item 4</TD>
          </TR>
</TABLE>


Item 1 Item 2
Item 3 Item 4
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:36:21 | Сообщение № 12
admin
Репутация: 734
Награды: 117
Код
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
          <TR>
                  <TD>A</TD> <TD>B</TD> <TD>C</TD>
          </TR>
          <TR>
                  <TD>D</TD> <TD>E</TD> <TD>F</TD>
          </TR>
</TABLE>









A B C
D E F
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:36:47 | Сообщение № 13
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
         <TR>
                 <TD>A</TD> <TD>B</TD> <TD>C</TD>
         </TR>
         <TR>
                 <TD>D</TD> <TD>E</TD> <TD>F</TD>
         </TR>
</TABLE>









A B C
D E F
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:38:14 | Сообщение № 14
admin
Репутация: 734
Награды: 117
Code
<TABLE BORDER WIDTH="50%">
         <TR><TD>Item 1</TD><TD>Item 2</TD>
         </TR>
         <TR><TD>
             <TABLE BORDER WIDTH=100%>
                 <TR><TD>Item A</TD><TD>Item B</TD>
                 </TR>
             </TABLE>
             </TD>
             <TD>Item 4</TD>
         </TR>
</TABLE>








Item 1Item 2




Item AItem B

Item 4
Ответить
ingvarr
(65528) Вне сайта
Дата: 25.11.2011, 04:42:05 | Сообщение № 15
admin
Репутация: 734
Награды: 117
Code
<TABLE align="center" border="1" cellpadding="5">
<TR>
<TH colspan="2">Примеры</TH>
</TR>
<TR>
  <TD>Пример1</TD><TD>Пример2</TD>
</TR>
<TR>
<TD>Пример3</TD><TD>Пример4</TD>
</TR>
</TABLE>












Примеры
Пример1Пример2
Пример3Пример4
Ответить
ingvarr
(65528) Вне сайта
Дата: 08.12.2011, 06:51:46 | Сообщение № 16
admin
Репутация: 734
Награды: 117
Таблица без рамок с обтекающим текстом

Code
<TABLE ALIGN=LEFT WIDTH=70%>   

<CAPTION><H3>Наиболее употребительные мужские имена<BR> взрослого   

населения Санкт-Петербурга</Н3>   

</CAPTION>   

<UL>   

<TR><TD VALIGN=TOP>   

<LI>Абрам <LI>Александр <LI>Алексей <LI>Альберт <LI>Анатолий <LI>Андрей   

<LI>Аркадий <LI>Борис <LI>Вадим <LI>Валентин <LI>Валерий <LI>Василий   

<LI>Виктор <LI>Виталий <LI>Владимир <LI>Владислав <LI>Вячеслав   

<LI>Геннадий <LI>Георгий <LI>Герман <LI>Григорий <LI>Дмитрий   

</TD>   

<TD VALIGN=TOP>   

<LI>Евгений <LI>Ефим <LI>Иван <LI>Игорь <LI>Илья <LI>Иосиф <LI>Константин   

<LI>Лев <LI>Леонид <LI>Михаил <LI>Николай <LI>Олег <LI>Павел <LI>Петр   

<LI>Роман <LI>Семен <LI>Сергей <LI>Станислав <LI>Эдуард <LI>Юрий <LI>Яков   

</TD>   

</UL>   

</TR>   

</TABLE>












Наиболее употребительные мужские имена
взрослого

населения Санкт-Петербурга



  • Абрам
  • Александр
  • Алексей
  • Альберт
  • Анатолий
  • Андрей

  • Аркадий
  • Борис
  • Вадим
  • Валентин
  • Валерий
  • Василий

  • Виктор
  • Виталий
  • Владимир
  • Владислав
  • Вячеслав

  • Геннадий
  • Георгий
  • Герман
  • Григорий
  • Дмитрий



  • Евгений
  • Ефим
  • Иван
  • Игорь
  • Илья
  • Иосиф
  • Константин

  • Лев
  • Леонид
  • Михаил
  • Николай
  • Олег
  • Павел
  • Петр

  • Роман
  • Семен
  • Сергей
  • Станислав
  • Эдуард
  • Юрий
  • Яков

  • Ответить
    Форум » Интернет » Всё для создания WEB сайта » Веб-строительство » Таблицы html в примерах
    • Страница 1 из 1
    • 1
    Поиск:

    Рейтинг@Mail.ru HotLog