Html таблицы параметры: Таблицы | htmlbook.ru

Leave a Comment / Html / By /

Колонки таблицы | htmlbook.ru

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

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

Рис. 1. Таблица с выделенными колонками

Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1).

Остается для ячеек первой колонки добавить к тегу <td> атрибут, а для ячеек четных колонок .

Пример 1. Колонки разного цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 2px solid black; /* Рамка вокруг таблицы */
    background: #778899; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    border-bottom: 4px double black; /* Двойная линия снизу */
   }
   .even { /* Стиль для четных колонок */
    background: #ffe4b5; /* Цвет фона */
    color: black; /* Цвет текста */
   }
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    color: #fffacd; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия.

Она получается за счет добавления свойства border-bottom к селектору TH.

Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).

Рис. 2. Выделение колонок с помощью линий и цвета

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем свойство border-left, оно создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, это свойство уберет лишние границы (пример 2).

Пример 2. Линии между колонками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    background: #daa520;  /* Цвет фона */
   }
   TD {
    border-left: 1px dashed black; /* Линия слева от ячейки */
   }
   .
  even { /* Стиль для четных колонок */
    background: #dcdcdc;  /* Цвет фона */
   } 
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    border: none; /* Нет лишних линий */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
  </body>
</html>

К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги <col> и <colgroup> призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.

CSSтаблицы

HTML по теме

  • Тег <table>
  • Тег <td>
  • Тег <th>

CSS по теме

  • background
  • border-bottom
  • color

Параметры таблиц | Параметры отступов и рамок

Рассмотрим некоторые параметры таблиц, применяемые при создании таблиц на Web-странице.

Параметры выравнивания

Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:

TD, TH { text-align: center }

Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):

CAPTION { text-align: left }

Содержимое ячеек таблиц по вертикали мы выровняем с помощью атрибута стиля vertical-align:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|

text-bottom|<промежуток между базовыми линиями>|inherit

Применительно к другим элементам Web-страниц он был описан в главе 8, но в случае ячеек таблиц ведет себя несколько по-другому.

— top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).

— middle — выравнивает содержимое ячейки по ее центру.

— bottom — выравнивает содержимое ячейки по ее нижнему краю.

Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц (см. главу 8):

TD, TH { vertical-align: middle }

Параметры отступов и рамок

 

Параметры таблиц — параметры отступов и рамок.

Для задания отступов мы можем пользоваться атрибутами стиля, знакомыми нам по главе 11.

— Для задания внутренних отступов между содержимым ячейки и ее границей — атрибутами стиля padding-left, padding-top, padding-right, padding-bottom и padding.

— Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.

Параметры рамок зададим через соответствующие атрибуты стиля, которые также знакомы нам по главе 11 (листинг 12. 1).

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

Если мы зададим рамки вокруг ячеек таблицы, Web-обозреватель нарисует рамку вокруг каждой ячейки. Такая таблица будет выглядеть как набор прямоугольников-ячеек, заключенный в большой прямоугольник-таблицу (рис. 12.1).

Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).

Атрибут стиля border-collapse указывает Web-обозревателю, как будут рисоваться рамки ячеек в таблице:

border-collapse: collapse|separate|inherit

— separate — каждая ячейка таблицы заключается в отдельную рамку (см. рис. 12.1). Это обычное поведение.

— collapse — рисуются рамки, разделяющие ячейки таблицы (см. рис. 12.2).

Данный атрибут стиля применяется только к самим таблицам (тегам <TABLE>).

Пример:

TABLE { border-collapse: collapse }

Параметры размеров

 

К параметрам таблиц относятся и параметры размеров.

Для задания размеров — ширины и высоты — таблиц и их ячеек подойдут атрибуты стиля width и height, описанные в главе 10.

— Если требуется задать ширину или высоту всей таблицы, нужный атрибут стиля указывают именно для нее:

TABLE { width: 100%;
height: 300px }

— Если требуется задать ширину столбца, атрибут стиля width указывают для первой ячейки, входящей в этот столбец (листинг 12.2).

— Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).

Обычно все размеры, которые мы зададим для таблицы и ее ячеек, — не более чем рекомендация для Web-обозревателя. Если содержимое таблицы не будет в ней помещаться, Web-обозреватель увеличит ширину или высоту таблицы. Зачастую это может быть неприемлемо, поэтому стандарт CSS предусматривает средства, позволяющие изменить такое поведение Web-обозревателя.

Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:

table-layout: auto|fixed|inherit

— auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.

— fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { table-layout: fixed;
overflow: auto }

Прочие параметры таблиц


Атрибут стиля caption-side указывает местоположение заголовка таблицы относительно самой таблицы:

caption-side: top|bottom|inherit

— top — заголовок располагается над таблицей (обычное поведение).

— bottom — заголовок располагается под таблицей.

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { caption-side: bottom }

Атрибут стиля empty-cells указывает, как Web-обозреватель должен выводить на экран пустые (не имеющие содержимого) ячейки:

empty-cells: show|hide|inherit

— show — пустые ячейки будут выводиться на экран. Если для них был задан другой фон, на экран будет выведен фон, а если заданы рамки, будут выведены рамки.

— hide — пустые ячейки не будут выводиться на экран.

Обычное поведение зависит от Web-обозревателя, так что, если это критично, лучше явно задать нужное значение атрибута стиля empty-cells.

Атрибут стиля empty-cells также применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { empty-cells: hide }

Представление для нашего Web-сайта


Применим наши знания по параметрам таблиц. Поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.

Сначала, как обычно, сформулируем перечень ее параметров.

— Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от «соседей».

— Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.

— Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.

— Внутренние отступы в ячейках — 2 пиксела.

— Рамки ячеек — тонкие, точечные, цвет #B1BEC6.

— Выравнивание текста заголовка таблицы — по левому краю.

Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.

Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.

Сохраним таблицу стилей main. css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.

Закончим о параметрах таблиц.

html — Как мне оформить параметр выбора как таблицу?

спросил

Изменено 1 месяц назад

Просмотрено 34к раз

У меня есть раскрывающийся список выбора формы, в котором я хотел бы отформатировать внутренний текст параметров. Каждый вариант имеет месяц, год и название. Я хотел бы, чтобы каждый был выровнен друг с другом. Я попытался поместить таблицу внутри элемента option, чтобы посмотреть, смогу ли я заставить ее, но это не удалось. Я пытался использовать неразрывные пробелы, но это тоже не удалось (думаю, из-за стиля семейства шрифтов для букв). Вот код, который у меня есть:

 <форма>
    
    <выбрать>

Я выровнял текст в коде, чтобы продемонстрировать, как я хотел бы, чтобы он располагался в раскрывающемся списке. Я знаю, что этот шрифт моноширинный, но шрифт, который я использую, нет. У меня также есть скрипка http://jsfiddle.net/n83ahz5q/ Как и в большинстве моих вопросов, я стараюсь уменьшить количество сценариев, я бы предпочел решение html/css, если это вообще возможно. Если нет, я тоже могу сделать собственный JavaScript.

  • html
  • css
  • формы
  • html-выбор

1

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

Лучшее, что вы можете сделать в этом направлении, это установить моноширинный шрифт и использовать неразрывные пробелы вместо обычных пробелов внутри вариант элементов, для последовательностей пробелов, которые не должны схлопываться. (Установка white-space: pre будет работать в теории, но не на практике: браузеры игнорируют ее для select и option элементы, так как они реализованы особым образом.) Пример (я использую реальный no- пробелы здесь; вы можете предпочесть   , например JAN   2000 ):

 #news2,
#новости2 вариант {
  семейство шрифтов: Consolas, моноширинный;
} 
 <выбрать>

В этом случае вам фактически не нужны неразрывные пробелы, если вы последовательно используете трехзначные сокращения месяцев (включая JUN и JUL).

Совершенно другой подход, позволяющий использовать любой шрифт, заключается в использовании набора переключателей вместо элемента select . Затем вы можете поместить части меток альтернатив в ячейки таблицы. (Это вызывает проблемы с доступностью, поскольку логически одна метка была разделена на несколько элементов, поэтому вы не можете связать метку с введите элемент обычным способом.) Пример:

 
    <тд>1995
    <тд>1991

  

    
    ЯНВ
    2000
    - Название 1
  

  

    
    Февраль
    1191
    - Название 2
  

  

    
    МАР
    2014
    - Название 3
  

  

    
    Апрель
    - Заголовок 4
  

  

    
    МОЖЕТ
    2034
    - Заголовок 5
  

  

    
    ИЮНЬ
    2210
    - Заголовок 6
  

  

    
    ИЮЛЬ
    - Заголовок 7

Мой jsfiddle показывает оба варианта в действии.

1

Это невозможно. Вместо этого вы можете имитировать выбор с помощью таблицы HTML (или div s/ ul ), CSS и jQuery.

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

 <таблица>

<тд>
  <выбрать имя="числа" несколько>

Если вы хотите использовать bootstrap-select, вы можете выполнить что-то похожее на табличное представление (то есть, если ваша цель состоит в том, чтобы сделать раскрывающийся список более читабельным), используя атрибут data-content или data-subtext

Здесь вы можете найти красивый пример: https://developer. snapappointments.com/bootstrap-select/examples/#styling

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

table (db.

html.table)

table (db.html.table)

table — формальная HTML-таблица (с заголовком) в документе.

Сводка

  • Последовательность:
    • информация ? (db.titleforbidden.info)
    • Подпись (db.html.caption)
    • Один из:
      • Zero или больше:
      • Zero или больше:
        • Colgroup 9003 ад ? (db.html.thead)
        • tfoot ? (db.html.tfoot)
        • Один из:
          • Один или несколько из:
            • tbody  (db.html.tbody)
          • Один или несколько из:

      Атрибуты

      Общие атрибуты.

      Additional attributes:

      • floatstyle
      • label
      • orient (enumeration)
        • “land”
        • “port”
      • pgwide (enumeration)
        • “0”
        • “1”
      • сводка
      • ширина (перечисление)
        • xsd:integer
        • xsd: String (шаблон: «[0-9]+%»)
      • Брадер (Несоооооо. “hsides”
      • “lhs”
      • “rhs”
      • “vsides”
      • “box”
      • “border”
    • rules (enumeration)
      • “none”
      • “groups”
      • “rows
      • «cols»
      • «all»
    • Cellspacing (перечисление)
      • xsd:integer
      • xsd:string (Pattern: “[0-9]+%”)
    • cellpadding (enumeration)
      • xsd:integer
      • xsd:string ( Шаблон: «[0-9]+%»)
    • tabstyle

    Дополнительные ограничения

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

    Описание

    Этот элемент таблицы идентифицирует формальный (с подписью) HTML-таблица. DocBook позволяет либо CALS, либо Таблицы HTML, обе из которых описывают таблицы геометрически с использованием строк, столбцов и ячеек.

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

    Почему таблицы HTML не находятся в пространстве имен HTML?

    Таблицы HTML были введены в DocBook V4.3, чего не было в пространства имен и был определен нормативно с помощью DTD. DTD не поддерживаются пространства имен очень хорошо. Технический комитет решил просто добавить имена элементов HTML в DocBook. Это решение упростило спецификацию, избежать проблем с поддержкой пространств имен в DTD и решить самый убедительный вариант использования: вырезание и вставка простого текстового HTML таблицы в DocBook.

    Строго говоря, ставить эти элементы было бы некорректно в пространстве имен XHTML, поскольку общие атрибуты DocBook разрешено на всех них и тд и -й элементов имеют очень разные модели контента, чем их аналоги HTML.

    Ожидания обработки

    Форматируется как отображаемый блок. Ожидается, что этот элемент будет подчиняться семантика, описанная в таблицах , как указано в XHTML 1.0 [XHTML].

    Атрибуты

    Общие атрибуты.

    граница

    Задает ширину (только в пикселях) рамки вокруг стола.

    cellpadding

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

    Cellspacing

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

    класс

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

    floatstyle

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

    frame

    Указывает, какие стороны фрейма, окружающего таблицу, будут видны.

    метка

    Указывает идентифицирующую строку для целей представления

    lang

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

    onclick

    Происходит, когда кнопка указывающего устройства нажимается на элемент.

    ondblclick

    Происходит при двойном щелчке кнопки указывающего устройства над элементом.

    onkeydown

    Происходит при нажатии клавиши над элементом.

    onkeypress

    Происходит при нажатии и отпускании клавиши над элементом.

    onkeyup

    Происходит при отпускании клавиши над элементом.

    onmousedown

    Происходит при нажатии кнопки указывающего устройства над элементом.

    onmousemove

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

    onmouseout

    Происходит при перемещении указывающего устройства от элемента.

    onmouseover

    Происходит при перемещении указывающего устройства на элемент.

    на мышке вверх

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

    orient

    Указывает ориентацию таблицы

    pgwide

    Указывает, отображается ли элемент в столбце или на странице. Рендеринг правил зависит от агента пользователя.

    стиль

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

    сводка

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

    tabstyle

    Задает стиль таблицы

    title

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

    ширина

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

    Родители

    Этот элемент встречается в 72 элементах.

    Дети

    Следующие элементы встречаются в Таблице: Подпись (DB.

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

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