Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица размеров обуви</title>
 </head>
 <body>
  <table border="1">
   <caption>Таблица размеров обуви</caption>
   <tr>
    <th>Россия</th>
    <th>Великобритания</th>
    <th>Европа</th>
    <th>Длина ступни, см</th>
   </tr>
   <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
   <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
   <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
   <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
   <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
   <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
   <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
   <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
   <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
   <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
   <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
   <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
   <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
   <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
   <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
   <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
   <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
   <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
   <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
   <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
   <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
  </table>
 </body>
</html>

Настройка элемента управления «Редактор HTML»

  • Статья

Дата последнего изменения: 27 сентября 2010 г.

Применимо к: SharePoint Server 2010

В этой статье
Ограничения
Заранее определенные форматы таблиц
Средство проверки орфографии

Элемент управления «Редактор HTML» используется для вставки на страницу публикации HTML-контента. Шаблоны страниц, включающие тип столбца HTML публикации, также включают и элемент управления «Редактор HTML». Этот редактор предоставляет особые возможности, например настраиваемые стили, ограничения правки, поддержку повторного использования контента, средство проверки орфографии и средства выбора активов, с помощью которых можно выбирать документы и изображения для вставки в контент страницы. В данном разделе показано, как изменить некоторые возможности и атрибуты элемента управления «Редактор HTML».

Ограничения

Если тип контента для макета страницы поддерживает столбец Контент страницы, в такой макет можно добавить элемент управления «Форматированный HTML-текст» с помощью приведенной ниже разметки.

<PublishingWebControls:RichHtmlField FieldName="ArticleAbstract" 
          AllowExternalUrls="false" 
          AllowFonts="true" 
          AllowReusableContent="false" 
          AllowHeadings="false"
          AllowHyperlinks="false"
          AllowImages="false"
          AllowLists="false"
          AllowTables="false"
          AllowTextMarkup="false" 
          AllowHTMLSourceEditing="false"
          DisalbeBasicFormattingButtons="false"
          runat="server"/>

В приведенном выше примере RichHTMLField — это имя элемента управления поля, обеспечивающего возможность редактирования HTML-кода. В таких атрибутах как AllowFonts и AllowTables задаются накладываемые на поле ограничения.

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

Таблица 1. Свойства элемента управления «Редактор HTML»

AllowExternalUrls

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

AllowFonts

Контент может содержать теги Font.

AllowHtmlSourceEditing

Редактор HTML можно переключить в режим непосредственного редактирования HTML-кода.

AllowReusableContent

Контент может содержать повторно используемые фрагменты контента, хранящиеся в централизованном списке.

AllowHeadings

Контент может содержать теги заголовков HTML (h2, h3 и т. д.).

AllowTextMarkup

Контент может содержать полужирный текст, текст, набранный курсивом, и подчеркнутый текст.

AllowImages

Контент может содержать изображения.

AllowLists

Контент может содержать нумерованные и маркированные списки.

AllowTables

Контент может содержать теги таблиц, например <table>, <tr> и <td>.

AllowHyperlinks

Контент может содержать ссылки на другие URL-адреса.

AllowHtmlSourceEditing

При задании значения false в редакторе HTML отключается возможность переключения в режим редактирования исходного HTML-кода.

AllowHyperlinks

Задает или получает ограничение на добавление в HTML-код гиперссылки. Если этому флагу присвоено значение false, из HTML-кода удаляются теги <A>, <AREA> и <MAP>. Значение по умолчанию — true. Это свойство также определяет, будут ли разрешены эти операции в пользовательском интерфейсе редактирования.

AllowImageFormatting

Задает или возвращает элементы форматирования изображения. Это ограничение отключает только меню и не применяется к контенту принудительно

AllowImagePositioning

Задает или возвращает положение изображения. Это ограничение отключает только меню и не применяется к контенту принудительно

AllowImageStyles

Задает или возвращает значение, указывающее, включено ли меню Стили таблицы. Это ограничение отключает только меню и не требует, чтобы содержимое соответствовало ему.

AllowInsert

Задает или возвращает значение, указывающее, отображаются ли пункты меню Вставка. Это ограничение отключает только меню и не применяется к контенту принудительно.

AllowLists

Задает или возвращает ограничение на добавление в HTML-код тегов списков. Если этому флагу присвоено значение false, из HTML-кода удаляются теги <LI>, <OL>, <UL>, <DD>, <DL>, <DT> и <MENU>. Значение по умолчанию — true. Это свойство также определяет, будут ли эти операции разрешены в пользовательском интерфейсе редактора.

AllowParagraphFormatting

Задает или возвращает ограничение на использование элементов форматирования абзацев. Это ограничение отключает только меню и не применяется к контенту принудительно

AllowStandardFonts

Задает или возвращает ограничение на использование стандартных шрифтов. Это ограничение отключает только меню и не применяется к контенту принудительно

AllowStyles

Задает или возвращает значение, указывающее, включено ли меню Стиль. Это ограничение отключает только меню и не применяется к контенту принудительно.

AllowTables

Задает или возвращает ограничение на добавление таблиц при изменении данного поля.

AllowTableStyles

Задает или возвращает значение, указывающее, включено ли меню Стили таблицы. Это ограничение отключает только меню и не требует, чтобы содержимое соответствовало ему.

AllowTextMarkup

Задает или возвращает ограничение на добавление тегов форматирования текста при изменении данного поля.

AllowThemeFonts

Задает или возвращает ограничение на использование шрифтов темы. Это ограничение отключает только меню и не применяется к контенту принудительно

Заранее определенные форматы таблиц

HTML-редактор включает набор заранее определенных форматов таблиц, которые можно настроить в соответствии со стилем отдельной страницы. Каждый формат таблицы представляет собой набор классов каскадных таблиц стилей (CSS) для каждого тега таблицы. Можно задать стили для первой и последней строки, четных и нечетных строк, первого и последнего столбца и т. д.

HTML-редактор динамически применяет определенные стили из размещенных на странице каскадных таблиц стилей и предоставляет их пользователям при форматировании таблицы. Чтобы при форматировании таблицы был доступен настраиваемый стиль, имена соответствующих классов необходимо задать в формате PREFIXTableXXX-NNN, где:

  • PREFIX — по умолчанию ms-rte, однако значение по умолчанию можно переопределить с помощью свойства PrefixStyleSheet() элемента управления поля RichHTML.

  • XXX — конкретный раздел таблицы, например EvenRow или OddRow.

  • NNN — имя, используемое для идентификации стиля таблицы.

Ниже приведен пример полного набора классов для форматирования стиля таблицы.

.ms-rteTable-1 {border-collapse:collapse;border-top:gray 1.5pt;
    border-left:gray 1.5pt;border-bottom:gray 1.5pt;
    border-right:gray 1.5pt;border-style:solid;}
.ms-rteTableHeaderRow-1 {color:Green;background:yellow;text-align:left}
.ms-rteTableHeaderFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableHeaderLastCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableHeaderOddCol-1 {padding:0in 5.4pt 0in 5. 4pt;}
.ms-rteTableHeaderEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableOddRow-1 {color:black;background:#FFFFDD;}
.ms-rteTableEvenRow-1 {color:black;background:#FFB4B4;}
.ms-rteTableFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableLastCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableOddCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableFooterRow-1 {color:blue;font-style:bold;
    font-weight:bold;background:white;border-top:solid gray 1.0pt;
    border-bottom:solid gray 1.0pt;border-right:solid silver 1.0pt; 
    border-style:solid;}
.ms-rteTableFooterFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;
    border-top:solid gray 1.0pt;text-align:left}
.ms-rteTableFooterLastCol-1 {padding:0in 5.4pt 0in 5.4pt;
    border-top:solid gray 1.0pt;text-align:left}
.ms-rteTableFooterOddCol-1 {padding:0in 5.4pt 0in 5.4pt;
    text-align:left;border-top:solid gray 1.0pt;}
.ms-rteTableFooterEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;
    text-align:left;border-top:solid gray 1. 0pt;}

Microsoft SharePoint Server 2010 включает набор стилей таблиц по умолчанию. Однако если система обнаруживает новые стили, основанные не на CSS-файле по умолчанию, она удаляет набор по умолчанию и предоставляет в диалоговом окне HTML-редактора только эти новые стили.

Средство проверки орфографии

В SharePoint Server 2010 HTML-редактор включает средство проверки орфографии, которое разработчики могут настроить с помощью веб-элементов управления SpellCheckV4Action и SpellCheckToolbarButton. Действие средства проверки орфографии регистрирует клиентские файлы и данные во время проверки орфографии. Оно также включает метод для получения вкладки консоли и запрашивает права пользователя, чтобы убедиться, что текущий пользователь обладает правами на выполнение проверки орфографии в выбранном элементе. Действие средства проверки орфографии вызывает соответствующий код на языке ECMAScript (JavaScript, JScript) и отправляет клиенту данные о доступных словарях и языке по умолчанию, которые будут использоваться при запросе.

См. также

Концепции

Практическое руководство. Настройка стилей

Инструкции. Настройка средства выбора активов

Tool Building — генератор HTML-таблиц

Ладно, признаю. Я инженер, а не дизайнер. Мое образование и опыт работы в области разработки программного обеспечения. Поэтому мне нравится создавать инструменты, облегчающие мои задачи. Я постоянно смотрю на задачи, которые я делаю, и спрашиваю себя, как я могу сделать это эффективнее или проще. Иногда ответ заключается в поиске лучшего инструмента. Может быть, новый редактор кода или лучший язык программирования. Иногда это влечет за собой создание собственного инструмента.

Например, я ненавижу кодировать HTML-таблицы. Те из вас, кто понимает HTML, понимают, о чем я говорю. Таблицы в HTML требуют много кода. Поэтому я сделал то, что сделал бы любой инженер: я построил инструмент.

Прежде чем описывать инструмент, позвольте мне сказать несколько слов о языках программирования. Я занимаюсь программированием более 40 лет, и до недавнего времени моим языком выбора быстрых инструментов кодирования был PERL. Я люблю PERL, потому что могу написать очень мощную программу всего за несколько строк кода. Но в последнее время я пишу свои инструменты с помощью JavaScript. С момента разработки библиотеки JavaScript jQuery я нахожу инструменты для написания на JavaScript/jQuery очень быстрыми и простыми. Поскольку JavaScript взаимодействует с веб-страницами, кодирование пользовательского интерфейса становится таким же простым, как кодирование веб-страницы.

Теперь опишем инструмент, генератор таблиц HTML. Вы можете увидеть его в действии на http://bob.hanlonbrown.com/tablegen.htm. При первом посещении страницы вы видите:

Вы можете щелкнуть строку «Примечания», чтобы увидеть некоторые комментарии об инструменте. Вот эти комментарии:

Это работа в процессе. Выберите количество столбцов и строк в таблице, а также укажите, нужны ли вам строки thead и tfoot. Нажмите кнопку «Создать таблицу», чтобы отобразить результаты. Затем вы можете внести изменения в ячейку, щелкнув ячейку и обновив содержимое, строки диапазона и столбцы диапазона. При объединении строк и столбцов появятся дополнительные ячейки. Их можно удалить, щелкнув ячейку, а затем нажав кнопку «Удалить». Кроме того, есть кнопки отмены и повтора, которые позволяют вам переходить вперед и назад по вашим изменениям. Когда закончите, щелкните код таблицы просмотра, чтобы увидеть код, который нужно скопировать и вставить в редактор.

Обратите внимание, что вы не можете добавлять строки или столбцы в форму после создания таблицы. Вы можете добавлять строки и столбцы, просматривая код таблицы и редактируя код в текстовой области, затем нажимая кнопку сохранения изменений

Итак, для начала давайте создадим таблицу без строки нижнего колонтитула. Позволяет сохранить классы, которые добавляют имена классов для нечетных и четных строк, а также для столбцов. Нажмите кнопку «создать таблицу» и вуаля:

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

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

В любой момент вы можете просмотреть HTML-код, нажав кнопку «просмотреть код таблицы». Щелкнув по нему, когда таблица находится в состоянии выше, вы увидите:

 

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

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

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

 

Теперь я могу вносить изменения в таблицу, нажимая на ячейки, которые я хочу изменить, вместо редактирования исходного HTML-кода. Когда я закончу, я могу просмотреть сгенерированный код и скопировать его обратно в исходный HTML-файл.

Этот инструмент был написан с использованием JavaScript и jQuery, чтобы упростить работу с таблицами HTML. Не стесняйтесь использовать его.

Таблица — HTML — OneCompiler

<голова>Название времени <тело>

​ 
 Нажмите кнопку RUN, чтобы увидеть результат

создано 2 года назад Navfica Rose

Пишите, запускайте и делитесь HTML-кодом онлайн с помощью онлайн-редактора HTML OneCompiler бесплатно. Это один из надежных, многофункциональных онлайн-редакторов кода для языка HTML, работающий на последней версии HTML5. Начать работу с HTML-компилятором OneCompiler просто и довольно быстро. Редактор показывает образец шаблонного кода, когда вы выбираете язык HTML . Вы также можете указать информацию таблицы стилей в вкладка styles.css и информация о скриптах на вкладке scripts.js и начните кодирование.

HTML (язык гипертекстовой разметки) — это стандартный язык разметки для веб-страниц, созданный Бернерсом-Ли в 1991 году. Почти каждая веб-страница в Интернете может использовать HTML.

Основы

HTML-элементы и атрибуты

CSS

CSS (каскадные таблицы стилей) описывает, как HTML-элементы будут выглядеть на веб-странице, такие как цвет, стиль шрифта, размер шрифта, цвет фона и т. д.

Пример:

Ниже приведен пример таблицы стилей, в которой заголовок отображается зеленым цветом и шрифтом Candara с отступом 25 пикселей.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

старший номерRoll.NoИмяКоманда
11001ДжонКрасный
21002ПитерСиний
31003ГенриЗеленый