Красивые таблицы css: Готовые CSS стили для таблиц

Создаем красивые таблицы в HTML — отступы, фон, заголовок, выравнивание текста

Тема сегодняшней статьи — создание таблиц, их изменение. Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!

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

Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.

Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.

Как в 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″>
  <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 (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Идем дальше.

Увеличиваем рамку (границы) таблицы и меняем ее цвет

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

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

Добавляем всего 1 атрибут и становится уже получше:

Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.

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

Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:

Как сделать отступы в таблице

Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):

<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:

<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″ cellpadding=»10″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:

Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.

Как грамотно объединить ячейки в таблице

Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.

Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.

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

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.

Сейчас покажу на примере. Вот наша текущая таблица:

Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!

Принцип объединения такой.

При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)

При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.

Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.

<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″>
  <tr>
    <td colspan=»2″>Яч. 1 и 2</td>
    <!—<td>Яч. 2</td>—>
    <td>Яч. 3</td>
    <td rowspan=»3″>Яч. 4, 8, 12</td>
  </tr>
  <tr>
    <td rowspan=»2″>Яч. 5 и 9</td>
    <td colspan=»2″>Яч. 6 и 7</td>
    <!—<td>Яч. 7</td>—>
    <!—<td>Яч. 8</td>—>
  </tr>
  <tr>
    <!—<td>Яч. 9</td>—>
    <td>Яч. 10</td>
    <td>Яч. 11</td>
    <!—<td>Яч. 12</td>—>
  </tr>
</table>

Надеюсь понятно объяснил и привел хороший пример.

Как сделать заголовок у таблицы

Чтобы задать таблице заголовок — используйте теги <caption></caption> после начала таблицы (<table>), но до начала тега <tr>. Вот что получается:

Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:

<caption align=»bottom»>Как задать заголовок</caption>

И тогда заголовок таблицы переместится под таблицу.

Итак, мы рассмотрели почти все, за исключением… Фона!

Как сделать красивый фон у ячейки или всей таблицы

HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».

Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:

<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″ bgcolor=»lightgreen»>

Результат:

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

<td rowspan=»3″ bgcolor=»white»>Ячейка 4, 8, 12</td>

Tada! Результат:

По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.

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

Удачи и успехов в изучении HTML.

источники CSS Таблица — Hi!Penpal!

источники CSS Таблица — Hi!Penpal!

This site uses cookies. By continuing to browse the site you accept the use of cookies. Cookie Policy OK

Hi!Penpal!

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE
SAMPLE	SAMPLE	SAMPLE

Related Tags

красивая CSS дизайн таблице образец CSS шаблон таблицы CSS3 свободные ресурсы CSS Maker

Copyright © hipenpal. com & ltool.net. All Rights Reserved.

Красивые таблицы в стиле

, использующие только CSS

Есть вопросы? Обсудить это Учебник по HTML5 и CSS вместе с другими пользователями форумы.

Фу! Фу! Я говорю маме. Убери, если с моей тарелки! Это реакция некоторых из вас, вероятно, возникает, когда я упоминаю слово «таблицы» в контексте веб-дизайна. Пока таблицы не улыбаются, когда дело доходит до макета, они все еще полезно для табличных вещей, таких как отображение табличных данные в столбцах и строках.

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

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

Пример

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

Mugshot	Смайлик Имя
	Бандит
	Обычный
	Чужой
	Робот
	Круто
	Ниндзя
	азиат

Обратите внимание, как в таблице отображаются смайлики.

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

Все это было сделано с использованием только CSS без путаницы таблицы наценка. Другими словами, таблица не содержит встроенных стилей или значений классов, чтобы каким-либо образом помочь CSS. Презентация таблицы действительно отделена от содержания. Что хорошая вещь ^TM .

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

Начало работы

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

 
<тд>

<тд>

<тд>

<тд>

<тд>
 
<тд>

<тд>
 Просто добавьте эту таблицу в любом месте вашего документа HTML, и вы должны быть
хорошо пойти. Как видите, эта таблица очень проста. Есть только одна вещь, которую вы должны отметить о
это,
то есть его идентификатор равен smileysTable.
 Если выйти за пределы разметки на секунду, ваша таблица без применения стилей должна выглядеть следующим образом:
 [ дааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааак ]
 Хорошо, теперь, когда мы все на одной странице, давайте начнем с
стиль этой таблицы, чтобы она выглядела лучше.
 Указание границ 
 Давайте начнем красиво и медленно. Первое, что мы сделаем, это уточним
граница, помогающая идентифицировать различные строки и столбцы. Есть два
части к этому.
 В первой части указывается граница всей внешней таблицы.
Это будет выглядеть так:
 #smileysTable {
граница: 2px сплошная #CCCCCC;
} 
 Создайте область стиля и добавьте указанное выше правило стиля в
это. Все, что мы делаем, это указываем свойство границы в
таблица, значение id которой smileysTable.
  Если вы сейчас просмотрите свой документ, вы увидите серый значок размером 2 пикселя.
граница, появляющаяся за пределами вашей таблицы:
 Вы только что закончили первую часть. Вторая часть определяет границы ячеек внутри
стол. Это делается путем нацеливания на td
и элементы:
 #smileysTable td, #smileysTable th {
граница: 1px сплошная #CCC;
} 
 Здесь я указываю границу размером всего 1 пиксель. Если вы просматриваете
ваша страница сейчас, ваша таблица теперь будет выглядеть следующим образом:
 Выглядит немного странно, не правда ли? Между всеми есть пространство
клетки. Избавимся от него, установив свойство border-collapse
на нашей таблице значение развала:
 #smileysTable {
граница: 2px сплошная #CCCCCC;
граница коллапса: коллапс;
} 
 Добавьте выделенную строку в стиль #smileysTable
правило. Как только вы это сделаете, в вашей таблице больше не будут отображаться пробелы.
между ячейками:
 Выглядит намного лучше. Вот это я называю прогрессом!
 Указание отступов (и полей!) 
 Прямо сейчас наша таблица и ее содержимое как бы сжаты вместе. Если вам не нравится, что содержимое вашей ячейки застряло так близко к границе,
вы можете легко исправить это, указав значения отступов и полей. Для нашего
В этом случае достаточно определить только отступ:
 #smileysTable td, #smileysTable th {
граница: 1px сплошная #CCC;
отступ: 10 пикселей;
} 
 Добавьте выделенную строку к существующей
#smileysTable td правило. Как только у вас есть
Сделав это, у содержимого вашей таблицы будет больше места для передышки:
 Если быть точнее, у вас есть 10 дополнительных пикселей дыхания.
 Указание размера 
 Давайте займемся следующим визуальным изменением, которое мы хотели бы сделать. Размер нашего стола — это минимум, необходимый для
содержат содержимое внутри него. Это не очень достойный способ для вашего
стол для жизни. Давайте исправим это в несколько этапов.
 Указание размера общей таблицы 
 Сначала зададим размер всей таблицы. Это делается
установка свойства ширины на столе
напрямую:
 #Стол смайликов {
граница: 2px сплошная #CCCCCC;
граница коллапса: коллапс;
ширина: 450 пикселей;
} 
 Добавьте выделенную строку, чтобы таблица отображалась шириной 450 пикселей.
 Указание размера отдельных столбцов 
 Теперь все станет интереснее. Что мы хотим сделать, так это
указать размер только отдельного столбца. Точнее, мы
хотите указать размер первого столбца, содержащего смайлик
изображений. Второй столбец должен остаться нетронутым.
 Если бы вам пришлось говорить об этом с помощью HTML, первый
столбец — это просто первый элемент td, который находится внутри каждого
элемент tr:
 <таблица>
 Что мы хотим сделать, так это использовать CSS для нацеливания на первый
td и найденный элемент
внутри каждого элемента tr. Способ, которым мы собираемся это сделать, заключается в использовании
псевдоселектор nth-of-type(n). Вот как выглядит CSS для
параметр
ширина первого столбца должна быть 75 пикселей:
 #smileysTable td:nth-of-type(1), #smileysTable th:nth-of-type(1) {
ширина: 75 пикселей;
} 
 То, что говорит псевдоселектор nth-of-type(1), довольно просто. Поймай меня
первый элемент td внутри любого родительского элемента
td является дочерним элементом. Это работает одинаково
для th элемента, а также. В этом случае родительский элемент
тр. Первый ребенок, тип которого
это td или th внутри
элемент tr становится целевым — это то, что мы хотим, поскольку
первый тр и
элементы соответствуют ячейке в первом столбце!
 После добавления последней части CSS ваша таблица будет выглядеть следующим образом:
 Ширина всей таблицы составляет 450 пикселей. Первый столбец 75
пикселей. Поскольку мы не указали значение ширины для второго столбца,
его ширина — это то, что осталось.
 Все не так просто 
 Если бы вы подумали, что ширина второго столбца равна 375
пикселей (450 пикселей — 75 пикселей), вы ошибетесь. Из-за
как отступы, поля и размеры границ создают окончательный
размер, вы будете на несколько пикселей. Эти пиксели сильно различаются
немного между браузерами, а также.
 Текст и выравнивание 
 Хорошо! Мы делаем большие успехи в том, чтобы сделать наш стол лучше. Давайте
возьмемся за всегда забавную область текста, и мы будем выравнивать обувную ложку
в него, потому что он использует текст     -align
свойство. Ха!
 Указание стиля шрифта для всей таблицы 
 Укажем общий шрифт и размер для всей таблицы. То есть
довольно просто:
 #smileysTable {
граница: 2px сплошная #CCCCCC;
граница коллапса: коллапс;
ширина: 450 пикселей;
семейство шрифтов: Cambria, Cochin, Georgia, serif;
размер шрифта: 14px;
} 
 Мы указываем хорошую коллекцию шрифтов с засечками, размер которых установлен на 14. пикселей. Поскольку мы применили это форматирование к нашей таблице, весь текст
в строках и столбцах внутри он будет отображаться с использованием этих настроек шрифта.
Другими словами, все, что находится внутри вашей таблицы, будет отображаться с помощью этих
настройки шрифта.
 Изменение стиля шрифта для строки заголовка 
 Для строки заголовка давайте сделаем шрифт немного больше
смело… буквально. Это на самом деле довольно просто. Причина в том,
что наша строка заголовка отмечена th
элемент. Стилизировать заголовок так же просто, как просто настроить его
й элемент, который живет внутри нашей таблицы:
 #smileysTable й {
вес шрифта: полужирный;
размер шрифта: 16px;
} 
 Видите ли, некоторые вещи довольно легко и просто сделать!
 Настройка выравнивания 
 Следующее изменение, которое мы рассмотрим, — это выравнивание содержимого внутри
Таблица. Выровняем по центру все содержимое в первом столбце,
но оставим все остальное в покое. Это требует модификации
созданное ранее правило стиля:
 #smileysTable td:nth-of-type(1), #smileysTable th:nth-of-type(1 {
ширина: 75 пикселей;
выравнивание текста: по центру;
} 
 Просто добавьте свойство text-align в правило стиля, которое у вас уже есть. для таргетинга на первый столбец. Текст в вашем элементе th, вероятно,
уже выровнены по центру. Это работает для первого столбца, но не для нас.
хотите, чтобы для второго столбца.
 Добавьте следующее правило стиля, определяющее текст в заголовке
строка для второго столбца выровнена по левому краю:
 #smileysTable th:nth-of-type(2) {
выравнивание текста: по левому краю;
} 
 После внесения изменений в этом разделе ваша таблица должна выглядеть
похоже на это:
 Хорошо, мы почти закончили. Остался еще один раздел, прежде чем ты станешь
член клуба   Make Tables Beautiful Club   !
 Раскрашивание стола 
 Прямо сейчас ваш стол бесцветный. У большинства хороших столов есть несколько
к ним сделана окраска, и в этом разделе давайте посмотрим, как указать
цвет фона, который выборочно применяется к строке заголовка и
чередование рядов.
 Установка цвета заголовка 
 Давайте сначала зададим для строки заголовка голубой цвет фона. Это требует
внося изменения в правило стиля, которое вы создали всего несколько
мгновениями ранее:
 #smileysTable й {
вес шрифта: полужирный;
размер шрифта: 16px;
цвет фона: #DDE9FF;
} 
 Как только вы это сделаете, ваша строка заголовка будет отображаться светло-голубым
фоновый цвет.
 Цвет фона для чередующихся строк 
 Последнее, на что мы собираемся обратить внимание, это предоставление
строки вашей таблицы цветом фона. К сожалению, это не может быть
достигается простым изменением существующего стиля. нам придется
на самом деле сделать некоторые новые работы здесь!
 Чтобы придать каждой альтернативной строке свой стиль, мы будем
добавление нового поворота в псевдоселектор nth-of-type
что мы использовали. Псевдоселектор типа n принимает в качестве аргумента число.
Это число указывает, какой элемент в родительском элементе является целевым. Это то что
вы видели, например, с nth-of-type(1).
 Псевдоселектор n-го типа является мастером. Это также может занять   числовое выражение   в качестве аргумента. Вместо
просто введя одно число, вы можете предоставить выражение, такое
как n+2 или 2n-1 и так далее. Значение выражения определяет, какой
элемент действительно станет целевым. Мысленно сообразить, какие элементы получат
целевое такое выражение, замените 0, 1, 2, 3, 4 и т. д. вместо n в
каждое выражение, чтобы получить окончательное число.
 Для нашей таблицы мы хотим сначала указать цвет фона, начиная с
с Бандитом, а затем через каждый второй ряд. CSS для этого выглядит
например:
 #smileysTable tr:nth-of-type(2n + 2) {
цвет фона: #ECF7FF;
} 
 Это правило указывает, что ваши 2-й, 4-й, 6-й, 8-й и т. д.
строка станет целевой. Добавьте это правило в свой документ и просмотрите таблицу. Ты
должно увидеть что-то вроде:
 Так как мы в очереди, давайте продолжим и заполним оставшиеся
чередовать ряды с чуть более тонким
Синий цвет. Способ сделать это — использовать следующий CSS, который просто
изменяет число, переданное псевдоселектору nth-of-type:
 #smileysTable tr:nth-of-type(2n + 3) {
цвет фона: #FBFDFF;
} 
 Вместо этого это правило стиля влияет на 3-ю, 6-ю, 9-ю и т. д. строки. После того, как вы добавите это правило стиля, просмотрите свою таблицу.
в последний раз. Теперь он должен выглядеть идентично таблице, которую вы видели.
вверху страницы:
 На этом мы завершили последнюю задачу, связанную со стилем.
связанные с тем, чтобы ваш стол выглядел потрясающе.
 Заключение 
 Надеемся, что это руководство помогло вам не только понять, как сделать
таблицы выглядят красиво, но я надеюсь, что это дало вам представление о том, как CSS
псевдоселекторы дают вам больше контроля над стилем контента. Некоторые из
вещи, которые я вам здесь показывал, были просто невозможны всего несколько лет
назад. Вам часто приходилось полагаться на JavaScript или делать какие-то довольно инвазивные действия.
вещи, чтобы сделать простые изменения, такие как добавление фона чередующимся строкам
цвет или внесение изменений только в определенную строку или столбец. У вас также было
пройти 15 миль босиком по снегу, чтобы найти браузер, который мог бы
рендерить все это.
 Прежде чем я уйду, я должен сказать большое спасибо  Патрик Дежарден, открывший мне глаза на существование
й
ярлык. В первой версии этой статьи использовался tr
для строки заголовка, и это семантически неверно, потому что
й
элемент лучше подходит для представления информации заголовка. Спасибо
Патрик!
 Есть вопрос? Пишите на форумы для быстрого ответа!
 Предыдущий артикул
 Следующая статья
 51 Стилизованные таблицы CSS — FrontEnd Resource 
 перейти к содержанию
 Автор
редактор
 Введение в CSS — Каскадные таблицы стилей | | Полный курс веб-разработки #8
 Вы ищете современные таблицы?
 Тогда проверьте этот список таблиц CSS, они тоже адаптивны.
  Вам также могут понравиться 
 75 Текстовые анимации CSS, которые вы можете использовать
 15 Удивительный анимированный фон CSS, который вы можете попробовать
 57 Красивые примеры карточек CSS для улучшения вашего пользовательского интерфейса
 19 Классная анимация загрузки CSS, которая вдохновит вас
 17 Причудливые окна поиска CSS
 21 Примеры современного меню CSS
 19 Стильные формы
 23 Фантастические эффекты наведения CSS
 CSS 3 6 Анимация границ CSS 902 6 19 CSS анимаций 9022 Выпадающие меню CSS
 15 Примеры творческих фильтров CSS
 35 Уникальные текстовые эффекты CSS
 15 Ползунки CSS, которые вы можете использовать
 21 Новые формы входа в Bootstrap для вас
 19Профили Bootstrap, которые вы можете использовать для себя
 13 Формы входа в систему Material Design
 35 Классные поля выбора CSS
 15 Ползунки диапазона CSS, которые вы можете использовать уже сегодня
 35 Креативное использование примеров CSS clip-path
 29 Уникальные переключатели CSS
 41 красивый пример CSS-анимации
  Pure CSS Responsive Accordion Table 
 Dev:  Anthony Collurafici 
 Код загрузки
  Таблица CSS 
 Dev:  Andrew Lohman 
 Download Code
  Fixed table header 
 Dev:  Nikhil Krishnan 
 Download Code
  Simple Responsive Table in CSS 
 Dev:  Matt Smith 
 Код загрузки
  Таблица данных 
 Dev:  alassetter 
 Код загрузки
  Адаптивный макет таблицы CSS 
 Dev:  Luke Peters 
 Код загрузки
  <Таблица> Адаптивная 
 Дев. Код загрузки
  Адаптивная таблица 
 Dev:  Geoff Yuen 
 Код загрузки
  Адаптивная таблица 
 Dev:  Iván Villamil 
 Загрузить код
  Акценсная таблица 
 DEV:  ALICO 
 Код загрузки
  NO Javascript Table с помощью Pagination 
 DEA Только таблица HTML и CSS 
 Разработчик:  Flor Antara 
 Код загрузки
  Подсветка таблицы с помощью чистого CSS (вертикальная и горизонтальная) 
 Dev:  Alexander Erlandsson 
 Download Code
  Responsive table with flexbox 
 Dev:  Matys 
 Download Code
  HTML Table & CSS Table 
 Dev:  Ahmad Awais 
 Код загрузки
  MODERN TABLE CSS (FLAT DESIGN) 
 Dev:  Vikas Chauhan 
 Код загрузки
  Pure CSS Table Column Hover 
 Dev:  Dave Santos 
 Download Code
  Fade and Blur on Hover Data Table 
 Dev:  Jack Rugile 
 Download Code
  Zigzag Table 
 Dev:  Chris Smith 
 Код загрузки
  Таблица с фиксированным заголовком и левым столбцом 
 Разработчик:  Эстель Вейл 
 Код загрузки
  Сортировка строк таблицы по заголовкам таблиц (по возрастанию и убыванию) 
 Dev:  Nathan Cockerill 
 Загрузить код
  Таблица данных с Couplapsible Table Rows 
 DEV:  Andor Nagy 
 Devil
 9000 2  Applysive 
 Загрузка
 9000 2  Arptainte 
 9000 2  Deviefive 
 9000 2 . Cathcart 
 Код загрузки
  Только CSS Адаптивные таблицы 
 Разработчик:  Дэвид Бушелл 
 Код загрузки
  Адаптивные таблицы с использованием LI 
 Dev:  Faiz Ahmed 
 Код загрузки
  Sticky Table Заголовки по положению: sticky; 
 Dev:  Wolf Wortmann 
 Загрузить код
  Акценсная таблица с RWD-таблицей Patterns 
 DEV:  SITEPOINT 
 Загрузка кода
71 DEVEPOINT 
 Загрузка
 7171 DEVEPOINT 
 Загрузка
7171717171. Хизер Бухель 
 Download Code
  CSS Grid: Periodic Table 
 Dev:  Olivia Ng 
 Download Code
  Animated Periodic Table 
 Dev:  Dilum Sanjaya 
 Download Code
  Responsive Periodic Table with CSS Grids 
 Dev:  Dilum Sanjaya 
 Код загрузки
  Периодическая таблица CSS 
 Dev:  Alma Madsen 
 Загрузить код
  Периодическая таблица элементов 
 Dev:  Брэди Саммонс 
 Код загрузки
  Периодическая таблица 
 Dev:  Kitty Girauledel 
 Dev:  Giraudel .
 Оставить комментарий
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
 

 


Магшот
Имя смайлика


Бандит


Нормальный


Чужой


Робот


Круто


Ниндзя


Азиатская


 

Столбец 1
Столбец 2


Столбец 1
Столбец 2


Столбец 1
Столбец 2


Столбец 1
Столбец 2