Css урок 11. свойства таблицы и табличная верстка

Оформление текста в таблице по госту

К примеру, основная сплошная подходит для изображения контура изделия, пунктирная – для изображения оси и т.д.

Порядок построения работы с чертежами:

• определить объект черчения;
• выбрать формат листа по ГОСТу;
• выбрать необходимое число проекций для работы;
• выполнить построение объекта на выбранном формате с правильно использованными по ГОСТу линиями;
• выполнить правильные сечения, разрывы для верного отображения отдельных частей элемента;
• указать необходимые размеры в соответствии с ГОСТ 2.307-68;
• выполнить надписи на чертеже в соответствии с ГОСТ 2.304-68.

По ГОСТам также студенту в ходе оформления чертежей дипломной работы нужно будет обязательно заполнить следующие графы:

графа 1 – наименование изделия, изображенного на чертеже.

Интервалы чисел в тексте записывают со словами «от» и «до» (имея в виду «От … до … включительно»), если после чисел указана единица физической величины или числа, представляют безразмерные коэффициенты, или через дефис, если числа представляют порядковые номера. Примеры 1 … толщина слоя должна быть от 0,5 до 20 мм.

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

Примечание — Здесь (и далее) таблицы приведены условно для иллюстрации соответствующих требований настоящего стандарта.

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

(Измененная редакция, Изм.

Перечень включают в содержание документа.

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

Нам снова придётся обратиться к тому же ГОСТу, на который следует опираться при выяснении общих принципов оформления дипломной работы.

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

B

backface-visibility	Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю
background	Сокращенное свойство для задания всех свойств фона в одном объявлении
background-attachment	Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode	Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip	Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color	Задает цвет фона элемента
background-image	Задание одного или нескольких фоновых изображений для элемента
background-origin	Задает исходную позицию фонового изображения
background-position	Определяет положение фонового изображения
background-repeat	Устанавливает, если/как фоновое изображение будет повторяться
background-size	Определяет размер фоновых изображений
border	Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom	Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-color	Задает цвет нижней границы
border-bottom-left-radius	Определяет радиус границы нижнего левого угла
border-bottom-right-radius	Определяет радиус границы нижнего правого угла
border-bottom-style	Задает стиль нижней границы
border-bottom-width	Задает ширину нижней границы
border-collapse	Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-color	Задает цвет четырех границ
border-image	Сокращенное свойство для установки всех свойств Border-Image-*
border-image-outset	Определяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeat	Указывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-slice	Определяет способ среза изображения границы
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width	Задает ширину изображения границы
border-left	Сокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-color	Задает цвет левой границы
border-left-style	Задает стиль левой границы
border-left-width	Задает ширину левой границы
border-radius	Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right	Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color	Задает цвет правой границы
border-right-style	Задает стиль правой границы
border-right-width	Задает ширину правой границы
border-spacing	Устанавливает расстояние между границами соседних ячеек
border-style	Задает стиль четырех границ
border-top	Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-color	Задает цвет верхней границы
border-top-left-radius	Определяет радиус границы верхнего левого угла
border-top-right-radius	Определяет радиус границы верхнего правого угла
border-top-style	Задает стиль верхней границы
border-top-width	Задает ширину верхней границы
border-width	Задает ширину четырех границ
bottom	Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break	Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadow	Прикрепление одной или нескольких теней к элементу
box-sizing	Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after	Задает поведение разрыва страницы, столбца или региона после созданного поля
break-before	Задает поведение разрыва страницы, столбца или региона перед созданным полем
break-inside	Определяет поведение разрыва страницы, столбца или региона в созданном поле

Эффект зебры

Для создания эффекта зебры используется CSS3 для выделения четных строк в элементе :

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Но выше приведенный селектор CSS3 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах:

$(".zebra tr:even").addClass('alternate');

Одна строчка кода jQuery. Потребуется также класс для замены:

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Генератор html таблиц

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

• apsolyamov.ru
• daruse.ru
• dezzi.ru

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

Генератор или онлайн конструктор сделает все за вас. После нажатия кнопки Create table, на мониторе появится готовый результат такой таблицы и уже готовый код для вставки на страницу. Таким образом, даже без знаний html кода, у вас получится готовая таблица буквально на несколько секунд.

Определение таблицы HTML

Тег определяет таблицу HTML.

Каждая строка таблицы определяется с помощью тега .
Каждый заголовок таблицы определяется с помощью тега .
Каждая таблица данных/ячейка определяется с помощью тега .

По умолчанию текст элементы выделены жирным шрифтом и центрированы.

По умолчанию текст элементы являются регулярными и выровненными по левому краю.

Пример

Простая HTML таблица:

<table style=»width:100%»>
 <tr>    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
 </tr>
 <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
 </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

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

Выравнивайте по запятой в десятичной дроби

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

В HTML 4 выравнивание по запятой в десятичной дроби было теоретически возможно с помощью тега td и его атрибута char, однако на практике это свойство не поддерживалось. В HTML 5 для этих целей используется text-align, хотя на момент написания статьи поддержка этого свойства для выравнивания чисел в таблице не идеальна. (CSS Text Level 4 Module2)

Синтаксис text-align следующий: в кавычки заключается символ, по которому происходит выравнивание (обычно точка или запятая), затем через пробел вводится ключевое слово, обозначающее тип выравнивания (по умолчанию это right). В примере ниже данные центрированы и выровнены по точке в десятичной дроби:

td { text-align: «.» center; }

В данном примере данные выровнены по символам «×» и «:»: 

Управляйте данными с помощью фильтров

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

Базовые фильтры: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.

Пример базового фильтра (таблица из UI Prep)

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

Пример комплексного фильтра (таблица из UI Prep)

Границы и рамки таблицы.

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

Стили рамки показаны на рисунке.

table {border: 1px solid #000;
}

Чтобы задать рамку ячейкам, используется то же свойство border, но для элемента td.

td {border: 1px solid #000;
}

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

table, td {border: 1px solid #000;
}

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

table, td{border-collapse: collapse;border: 1px solid #000;
}

Чтобы внешнюю рамку сделать жирнее, для элемента table просто увеличиваем ширину рамки.

table{border-collapse: collapse;border: 2px solid #000;
}td{border: 1px solid #000;
}

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то — по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

• цифры выравниваем по правому краю;
• текст выравниваем по левому краю;
• заголовки выравниваем по той же стороне, что и данные под ними (если текст — по левому краю, если цифры — по правому);
• выравнивание по центру не используем или используем только в качестве исключения.

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

Выберите лучшее оформление строк

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

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

Пример сетки (таблица из UI Prep)

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

Пример горизонтальной линии (таблица из UI Prep)

Зебра: Чередование разного цвета фона для каждой строки — ещё один хороший способ помочь пользователям сосредоточиться на чтении. Этот стиль рекомендуется для больших наборов данных, где чередование будет четким и не вызовет путаницы из-за выделения определенной строки.

Пример зебры (таблица из UI Prep)

Свободная форма: Удаление всех разделителей создает минималистичный вид за счет максимального уменьшения визуальных помех. Этот стиль рекомендуется для небольших наборов данных, где пользователям не нужна помощь при чтении.

Пример произвольной формы (таблица из UI Prep)

Как можно меньше чернил

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

Статистика бэттинга в Национальной Лиге 2016 — BaseballReference

Линейки

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

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

Также у меня есть личное мнение по поводу линеек: не используйте разделение на полосы по зебре. Это плохая практика. Впрочем, соглашаться со мной или нет — решать вам.

Фоны

Фоны наиболее хороши для подсветки различных областей данных: например, переходов от частных значений к суммам или средним значениям.

Многие элементы можно выделить без использования фонов: подсветку значений, дополнительный контекст к данным, изменения в значениях по сравнению с прошлыми периодами. Воспользуйтесь графическими элементами, например ✻, † (один из моих любимых), или ▵.

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

Относитесь к таблицам как к тексту, который будут читать

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

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

Таблицы не нужно «украшать» только для того, чтобы они смотрелись эстетичнее. Хорошо составленная таблица может быть красивой, но только при условии, что форма в первую очередь служит содержанию.

Правильно составленная таблица легко читается и выявляет общие паттерны и закономерности в анализируемых данных. Мастер типографического дизайна Ян Чихольд пишет1: 

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

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

Работая с текстом в вебе, вы же не пытаетесь поместить на экран столько слов, сколько влезет. Тот же принцип применим и к таблицам: не нужно впихивать туда как можно больше данных. Есть соблазн уменьшить размер текста в таблице, и если вся информация числовая, это может сработать. Но даже при таком сценарии пользователь должен без труда считывать информацию со своего обычного положения не приближаясь к экрану.

Добавим стили к таблице html.

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

Для создания подсветки по строке и столбцу, с изменением цвета ячейки и заголовка таблицы html.

1. hover класс изменяет цвет ячейки.
2. hover-all будет менять все цвета ячеек по горизонтали и вертикали.
3. hover-hdr заголовки подкрасятся в другой цвет, для выделения.

Стиль для модального окна из статьи выше.

Код в main.sass.

.tbl
margin: 50px
width: 50%
border-collapse: collapse
background-color: #B2EBF2
td
border: 3px solid blue
padding: 5px
text-align: center
vertical-align: center
a
color: #000
font-size: 1em
.tbl-hdr
font-weight: bold
background: #00BCD4
.hover
background-color: #9C27B0
cursor: pointer
color: white
.hover-all
background-color: #EC407A
color: white
.hover-hdr
background-color: #558B2F
color: white
.modal-dialog
margin-top: 10%
margin-left: 20%
display: none
.modal-header
border-bottom: none
h3
text-transform: uppercase
color: blue
text-align: center
.btn
&:focus
outline: none
.modal-content
border-radius: 0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.tbl margin50px width50% border-collapsecollapse background-color#B2EBF2 td border3pxsolid blue padding5px text-aligncenter vertical-aligncenter a color#000 font-size1em .tbl-hdr font-weightbold background#00BCD4 .hover background-color#9C27B0 cursorpointer colorwhite .hover-all background-color#EC407A colorwhite .hover-hdr background-color#558B2F colorwhite .modal-dialog margin-top10% margin-left20% displaynone .modal-header border-bottomnone h3 text-transformuppercase colorblue text-aligncenter .btn &focus outlinenone .modal-content border-radius

Как в HTML сделать таблицу

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

Для добавления на страницу таблицы используется тег <table>. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать — </table>.

Строки и столбцы задаются при помощи тегов <tr> и <td>, при этом вместо <td> вы можете смело использовать <th>. Отличие <th> от <td> в том, что браузер отображает текст в ячейке <th> как жирный, а также выравнивает его по центру ячейки — т.е. можно использовать в заголовках таблицы, не прибегая к дополнительному форматированию. В остальном между ними нет разницы, можно использовать любой.

Строки таблицы (<tr></tr>) должны быть помещены строго между <table></table>. А столбцы таблицы (<td></td>) в свою очередь помещаются строго между тегами <tr></tr>.

Давайте создадим на практике таблицу, которая будет состоять из одной строки и четырех столбцов. Нам нужно обозначить начало таблицы (<table>), начало строки (<tr>), четыре ячейки (<td>), конец строки (</tr>), конец таблицы (</table>).

<table border=»1″>
  <tr>
    <td>Яч. 1<td>
    <td>Яч. 2<td>
    <td>Яч. 3<td>
    <td>Яч. 4<td>
  <tr><table>

Результат:

Теперь давайте используем тег <th>, чтобы больше не возвращаться к этому.

<table border=»1″ width=»400″>
  <tr>
    <td>Яч. 1<td>
    <td>Яч. 2<td>
    <td>Яч. 3<td>
    <td>Яч. 4<td>
  <tr>
<table>

Результат:

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

Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height. Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).

Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.

Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Идем дальше.

Шаг 1. Определяемся с местом заголовка

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

1. Если верхняя граница таблицы расположена сразу на первой строке книги, то нужно сместить ее на некоторое количество строк вниз, исходя из предполагаемого размера заголовка. Кликаем правой кнопкой мыши по любой ячейке первой строки и в открывшемся меню щелкаем по функции “Вставить…”.
2. После этого на экране появится небольшое вспомогательное окно, которое позволяет выбрать, что конкретно нужно вставить. Поскольку нам нужно добавить строки, соответственно, ставим отметку напротив опции “строку” и кликаем OK.
3. Над таблицей появится новая пустая строка. Однако, при добавлении всего одной строки, между заголовком и самой таблицей будет совсем немного свободного места, из-за чего он не будет особо выделяться на общем фоне, что не так хорошо. И поскольку наша задача – отобразить заглавный текст так, чтобы он был хорошо виден и читаем, вставляем еще 1-2 строки. Для этого в только что добавленной пустой строке также правой кнопкой мыши кликаем по любом элементу и в контекстном меню выбираем пункт “Вставить…”.
4. Снова выбираем вставку строки и щелкаем OK.
5. В случае необходимости аналогичным образом можно добавить столько строк, сколько нужно.

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

1. В верхней части таблицы выделяем диапазон ячеек по вертикали, содержащий столько строк, сколько мы планируем добавить сверху. Затем правой кнопкой мыши кликаем по любому элементу выделенной области и в открывшемся контекстном меню выбираем функцию “Вставить…”.
2. Снова откроется вспомогательное окно, предлагающее на выбор опции вставки. Выбираем “строку” и нажимаем OK.
3. Над таблицей появится необходимое количество новых пустых строчек.

Кроме этого есть еще один метод добавления новых строк.

1. В верхней части таблицы выделяем диапазон ячеек по вертикали, который будет соответствовать количеству новых строк, которое мы планируем добавить. Затем переключаемся во вкладку “Главная”, кликаем по треугольной пиктограмме с правой стороны от кнопки “Вставить” (в разделе “Ячейки”). Из появившегося перечня выбираем функцию “Вставить строки на лист”.
2. Перед таблицей добавятся новые строки и их количество соответствует числу строк в выделенном ранее диапазоне.

Итак, подготовительный этап пройден, можно двигаться дальше.

Создание таблицы в html онлайн конструктор

1. Создайте таблицу в любой из программ — Microsoft Excel, OpenOffice или Microsoft Word. Заполните все её ячейки текстом.
2. Выделите ваш результат и кликните правой кнопкой мыши и выберите пункт “Копировать”.
3. Перейдите в генератор таблиц html онлайн – Tableizer
4. В генераторе в пустое поле вставьте содержимое буфера обмена (клик правой кнопкой мыши и выбор пункта “Вставить”)
5. Выберите Размер шрифта Font size, цвет шапки (верхних ячеек, первой строки) — параметр  Header color, шрифт текста Font.
6. Нажмите кнопку Tableizer it!
7. Копируйте код из окошка и вставляйте в текстовый редактор своего блога в режиме html.

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

• background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
• bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

• cellspacing — расстояние между границами соседних ячеек;
• cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

• left — выравнивание по левой границе;
• right — выравнивание по правой границе;
• center — выравнивание по центру.

Параметр valign может иметь такие значения:

• bottom — выравнивание по нижней границе;
• top — выравнивание по верхней границы;
• middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

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

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

• width — ширина;
• height — высота;
• alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
• title — подпись к картинке;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Заключение

Итак, публикация получилась достаточно объемной, но зато очень информативной. После прочтения вряд ли у кого-то еще возникнет вопрос «Как сделать таблицу в ворде.

Подведем итоги в виде таблицы,которую я соорудил для вас:

Способ вставки таблицы	Особенность	Сложность
Окно быстрой таблицы	Самый быстрый способ создания	Просто
Команда «вставить таблицу»	Ручной ввод количества ячеек, возможность установки сохранения настроек	Просто
Рисование	Создание нестандартных столбцов и строк	Сложно
Excel	Ввод формул, рабочая среда Microsoft Excel с инструментами.	Сложно
Экспресс-таблицы	Быстрый способ получить красивую табличку	Просто
Преобразование текста	Быстрый способ сгруппировать уже введенные данные	Просто