Главная » Языки программирования

table with auto width

HTML тег

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

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

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

Содержание
  1. Синтаксис
  2. Пример
  3. Результат
  4. Пример с атрибутом colspan
  5. Результат
  6. Пример с атрибутом rowspan
  7. Результат
  8. Атрибуты
  9. Как добавить стиль к тегу ?
  10. Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
  11. Цвет текста внутри тега :
  12. Стили форматирования текста для тега :
  13. Другие свойства для тега :
  14. HTML/CSS/Table Style/table
  15. A table with auto width only expands enough to accomodate its content
  16. basic table
  17. Basic table with tr, td
  18. Calendar table
  19. Fixed table first column
  20. Make table font bold
  21. Set table border to collapse, 1px solid black
  22. Set table width, margin and text align
  23. Lorem ipsum dolor sit amet
  24. Table background
  25. table background-color: #efefef;
  26. Table body font size
  27. table border-color: #999999;
  28. table border-style: solid;
  29. table border-width: 1px;
  30. table font-family: arial, verdana, sans-serif;
  31. Table inline style
  32. font-weight
  33. Синтаксис
  34. Значения
  35. Объектная модель
  36. Браузеры

Синтаксис

Пример

html> html> head> title>Заголовок документа title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th>Месяц th> th>Дата th> tr> tr style="background-color:lightgrey;"> td>Март td> td>10.09.2018 td> tr> tr style="background-color:lightgrey;"> td>Июнь td> td>18.07.2018 td> tr> table> body> html>

Результат

tdexample1

Пример с атрибутом colspan

html> html> head> title>Заголовок документа title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th>Эл. почта компании th> th>Дата th> tr> tr> td style="background-color:#e6ebef;">a href="#">[email protected] a> td> td style="background-color:#e6ebef;">01.09.2017 td> tr> tr style="height:60px; background-color:#e6ebef;"> td colspan="2" valign="bottom" style="background-color:#a3cced;">[email protected]; strong>01.09.2017 strong>span style="font-size:14px;">(received date) span> td> tr> table> body> html>

Результат

tdexample2

Пример с атрибутом rowspan

html> html> head> title>Заголовок документа title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th>Месяц th> th>Год th> tr> tr> td style="background-color:#e6ebef;">Март td> td rowspan="2" style="background-color:#a3cced; text-align:center;">2014 td> tr> tr style="background-color:#e6ebef;"> td style="background-color:#e6ebef;">Июнь td> tr> table> body> html>

Результат

tdexample3

Атрибуты

Атрибут Значение Описание
abbr text Определяет сокращенный вариант содержимого ячейки, либо выступает в роли альтернативного текста.
align left
right
center
justify
char		 Выравнивает содержимое ячейки данных таблицы.
Не поддерживается в HTML5.
axis category_name Задает группировку ячеек, связанных между собой похожей информацией.
Не поддерживается в HTML 5.
background background Задает фоновый рисунок в ячейке.
Не поддерживается в HTML 5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Задает цвет фона ячейки таблицы.
Не поддерживается в HTML 5.
bordercolor bordercolor Задает цвет рамки.
Не поддерживается в HTML 5.
char character Выравнивает содержимое ячейки данных таблицы по заданному символу. Атрибут char используется только если атрибут align = «char».
Не поддерживается в HTML 5.
charoff number Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево. Атрибут charoff используется только, если атрибут align = «char».
Не поддерживается в HTML 5.
colspan number Атрибут определяет количество столбцов, которое ячейка должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 1000, т.к. они могут быть сокращены до этого числа. Значение по умолчанию 1.
headers header_id Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом . Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов.
height %
pixels		 Задает высоту ячейки.
Не поддерживается в HTML 5.
nowrap nowrap Указывает, что содержание в ячейке не должно переноситься.
Не поддерживается в HTML 5.
rowspan number Атрибут определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scope col
colgroup
row
rowgroup		 Задает способ связывания заголовочной ячейки (HTML тег ) с ячейками данных в таблице.
Не поддерживается в HTML 5.
valign top
middle
bottom
baseline		 Задает вертикальное выравнивание содержимого в ячейке данных.
Не поддерживается в HTML 5.
width %
pixels		 Задает ширину ячейки данных.
Не поддерживается в HTML 5.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

HTML/CSS/Table Style/table

A table with auto width only expands enough to accomodate its content

table

A table with auto width only expands enough to accomodate its content.

basic table

Pizza Type Small Medium Large
Thin Crust 3.99 4.99 6.99
Deep Dish 4.99 6.99 8.99
Stuffed Crust 5.99 7.99 9.99

Basic table with tr, td

Calendar table

width: 100%; border-collapse: collapse;
font-family: monospace; font-size: 1.5em; padding: 0; margin: 0;
font-family: monospace; font-size: 2em; padding: 0; margin: 0;
background-color: #00B3FF; color: white; font-family: monospace; width: 75px;
border-right: 1px solid black; border-bottom: 1px solid black; font-family: monospace; text-decoration: none; float: left; width: 1.5em; height: 1.5em; background-color: white; text-align: center;
display: block; float: left; width: 1em; height: 1em; text-align: center; background-color: #666; color: white; font-weight: bold; text-decoration: none;
padding-left: 1em; padding-bottom: .75em;
width: 14%; background-color: #ccc; border: 1px solid white; vertical-align: top;
border-right: 1px solid #666; border-bottom: 1px solid #666; font-family: monospace; float: left; width: 1.5em; height: 1.5em;

Fixed table first column

width:100px; background:#ffffcc; float:left;
background:#ffffcc; width:900px;
width:500px; overflow:auto; overflow-y:hidden; border-right:1px solid red; float:left;

Make table font bold

width: 100%; border: thin solid black; border-collapse: collapse;
border: thin solid black; text-align: center; font-weight: bold;
font-size: 90%; text-align: right;
Table: My favorite records.

album artist released
R T 1
B V 1
Q Q 1
M T 1
album artist released

Set table border to collapse, 1px solid black

border-collapse: collapse; border: 1px solid black;
Summary of Financial Data

Fiscal Year Worksite
Presentations		 Passing Grades Number of Presentators
2003
2004

Set table width, margin and text align

width: 50%; margin: 0 auto; text-align: left;

Lorem ipsum dolor sit amet

This is the first cell This is the second cell
This is the third cell, it»s under the first cell This is the fourth cell, it»s under the second cell.

Table background

width: 90%; margin: 0 auto; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: .9em; line-height: 1.4em; border-collapse: collapse;
caption-side: bottom; line-height: 4em; font-family: Georgia, "Times New Roman", serif; font-size: .85em; font-style: italic;
border-bottom: 1px solid #999;
text-align: left; background-color: #666; color: #fff; font-weight: normal; border: 1px solid #666; padding: 0 .5em;
color: #333; border-left: 1px solid #999; border-right: 1px solid #999; padding: 0 .5em;

editors

N A W R
J W h A
I A h A
D W h/ A
C A h E
W A h T

table background-color: #efefef;

background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;

Font properties

Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

Table body font size

width: 200px; border: thin solid black;
border: thin solid black; text-align: center; font-weight: bold;
font-size: 90%; text-align: right;
Table: My favorite records.

album artist released
R T 1
B V 1
Q Q 1
M T 1
album artist released

table border-color: #999999;

background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;

Font properties

Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

table border-style: solid;

background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;

Font properties

Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

table border-width: 1px;

background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;

Font properties

Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

table font-family: arial, verdana, sans-serif;

background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;

Font properties

Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

Table inline style

Источник

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Применение свойства font-weight

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Источник

Читайте также:  Языки программирования виды python
Оцените статью
© 2024 Программирование