Css цвет таблицы через одну: Как выделить другим цветом первую строку таблицы?

Содержание

Как выделить другим цветом первую строку таблицы?

Тема:Таблицы

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Задача

Изменить стиль заголовка таблицы.

Решение

Первая строка таблицы обычно используется для заголовка, в котором пишется наименования столбцов. Для акцентирования внимания на заголовке, строку выделяют другим фоном и цветом. С этой целью обычно применяется тег <th>, который по своему действию похож на тег <td>, при этом текст в ячейке выравнивается по ее центру и пишется жирным начертанием. Для селектора th допустимо задать собственный стиль, определяющий оформления строки заголовка (пример 1).

Пример 1. Использование тега <th>

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Строка заголовка</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /*  Убираем двойные линии между ячейками */
   }
   td, th {
    padding: 4px; /* Поля в ячейках */
    border: 1px solid #000080; /* Граница между ячейками */
   }
   th {
    background: #000080; /* Цвет фона строки заголовка */
    color: #ffe; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
    font-family: Arial, Helvetica, sans-serif; /* Выбор гарнитуры */
    font-size: 0.  9em; /* Размер текста */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Изображение</th>
    <th>Цель</th>
    <th>Решение</th>
   </tr>
   <tr>
    <td>Фотография</td>
    <td>Просмотр</td>
    <td>Уменьшить до 600 пикселов по максимальной стороне. Формат JPEG.</td>
   </tr>
   <tr>
    <td>Фотография</td>
    <td>Печать</td>
    <td>Зависит от размера печатного оттиска. Для 10х15 см достаточно 
        1500 пикселов по максимальной стороне. 
    Формат JPEG.
    </td>
   </tr>
   <tr>
    <td>Цветной документ</td>
    <td>Просмотр</td>
    <td>Уменьшить до 800 пикселов по максимальной стороне. 
        Формат JPEG или GIF.</td>
   </tr>
   <tr>
    <td>Ч/б документ</td>
    <td>Просмотр</td>
    <td>Уменьшить до 800 пикселов по максимальной стороне.
  Формат TIFF или GIF.</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 1. Вид заголовка, оформленного с помощью стилей

Поскольку содержимое тега <th> по умолчанию выравнивается по центру ячейки, для изменения выравнивания в примере 1 используется стилевое свойство text-align со значением left.

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

Пример 2. Использование тега <thead>

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Строка заголовка</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   td, th {
    padding: 4px; /* Поля в ячейках */
    border: 1px solid #999; /* Граница между ячейками */
   }
   thead {
    background: #666; /* Цвет фона строки заголовка */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <td>Место</td>
     <td>Оценка</td>
     <td>Фильм</td>
     <td>Год выпуска</td>
    </tr>
   </thead> 
   <tr><td>1</td><td>9.
  1</td><td>Крёстный отец</td><td>1972</td></tr>
   <tr><td>2</td><td>9.1</td><td>Побег из Шоушенка</td><td>1994</td></tr>
   <tr><td>3</td><td>9.0</td><td>Крёстный отец 2</td><td>1974</td></tr>
   <tr><td>4</td><td>8.9</td><td>Хороший, плохой, злой</td><td>1966</td></tr>
   <tr><td>5</td><td>8.8</td><td>Криминальное чтиво</td><td>1994</td></tr>
   <tr><td>6</td><td>8.8</td><td>Список Шиндлера</td><td>1993</td></tr>
   <tr><td>7</td><td>8.8</td><td>Звёздные войны: эпизод 5</td><td>1980</td></tr>
   <tr><td>8</td><td>8.8</td><td>Полёт над гнездом кукушки</td><td>1975</td></tr>
   <tr><td>9</td><td>8.  8</td><td>Касабланка</td><td>1942</td></tr>
   <tr><td>10</td><td>8.8</td><td>Семь самураев</td><td>1954</td></tr>
  </table>
 </body>
</html>

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

Рис. 2. Применение тега <thead>

таблицы

Тег <table>
Тег <th>
Тег <thead>

Таблицы в html

Сайты — строим сами
Сайты — строим сами

Главная	Введение	Основы HТМЛ	Формат и цвет	Картинки и ссылки	Таблицы	Фреймы	Основы CSS

jpg»>

Вёрстка сайта	Формы в html

Значение таблиц в HTML переоценить сложно. По сути вся страница может состоять из таблиц или из одной таблицы с вложенными подтаблицами. Поэтому надо знать как ими пользоваться, это сильно облегчит Вам жизнь. Сложного в этом ничего нет, хотя запутаться можно. Поэтому торопиться не будем, пойдем по порядку.
<table border=»1″&gt — открывает таблицу определяет толщину рамки;
&nbsp &nbsp <tr&gt — открывает строку в таблице;

&nbsp &nbsp &nbsp &nbsp<td&gtсодержимое ячейки</td&gt — определятет первый столбец в строке;
&nbsp &nbsp &nbsp &nbsp<td&gtбольшее содержимое ячейки</td&gt — определятет второй столбец в строке;
&nbsp &nbsp </tr&gt — закрывает строку;
</table&gt — закрывает таблицу; Получилась простенькая таблица из одной строки и двух столбцов.

содержимое ячейки

большее содержимое ячейки

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

Атрибуты тега

<table&gt

Атрибут

Назначение

align

Выравнивание таблицы относительно документа, значения: right, left, center

background

Определение рисунка для заднего фона (путь, название файла, расширение)

bgcolor

Определение цвета для заднего фона (одно из двух либо предыдущий атрибут, либо этот)

border

Толщина рамки в пикселях, если не указан, таблица будет без рамки

bordercolor

Цвет рамки

cellspacing

Определяет растояние между ячейками

cellpadding

Определяет растояние между содержимыи ячейки и рамкой

rules

Определяет рамки внутри таблицы. Может иметь следующие значения
all	Отображает все части рамки внутри таблицы
cols	Отображает все вертикальные рамки внутри таблицы
groups	Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY,TFOOD
none	Удаляет все рамки вокруг таблицы
rows	Отображает все горизонтальные рамки внутри таблицы

summary

Описание таблицы для браузеров поддерживающих азбуку Бройля или речевой вывод

frame

Определяет рамки вокруг таблицы. Может иметь следующие значения
above	Граница только сверху
below	Граница только снизу
hsides	Границы сверху и снизу
vsides	Границы только слева и справа
lhs	Граница только слева
rhs	Граница только справа
box или border	Все четыре стороны

title

Всплывающая подсказка

width

Ширина таблицы в пикселях или процентах

Как видите здесь я использовал вложенную подтаблицу. Сделать это очень просто, после тега <td&gt, который открывает ячейку, вставляется тег <table&gt, и далее прописывается нужная Вам таблица. Вобщем просто, но хлопотно. Потом подтаблица обязательно закрывается &lt/table&gt, и продолжается основная таблица. И, как видите, цвет можно определить для каждой отдельной ячейки. Ещё нужно знать, что тег <td&gt можно заменить тегом <th&gt, который определяет заголовок таблицы. Но на самом деле дает только более жирный шрифт и выравнивание по центру. На примере всё хорошо видно.
<table border=»1″ bgcolor=»#F5F5DC»right»&gt
&nbsp &nbsp <tr&gt

Заголовок	Заголовок
Содержимое ячейки	Содержимое ячейки

&nbsp &nbsp &nbsp &nbsp<th5″ bordercolor=»yellow» background=»picture/02. jpg» align=»center»>Атрибуты применяющиеся и для строк и для ячеек align Горизонтальное выравнивание текста в ячейках строки. Значения: center, left, right valign Вертикальное выравнивание текста в ячейках строки. Значения: top, center, bottom соответственно по верхнему краю, по центру, по нижниму краю bgcolor Устанавливает цвет фона строки, ячейки background Определяет фоновое изображение строки, ячейки Атрибуты применяющиеся только для ячеек width Определяет ширину ячейки в пикселях height Определяте высоту ячейки в пикселях colspan Растягивает ячейку по ширине, например colspan=»2″, ячейка растянута на две колонки rowspan Растягивает ячейку по высоте rowspan=»2″, ячейка растянута на две строки nowrap Размещение текста в одну строку
И напоследок пара примеров, как можно получить границу таблицы не используя атрибут border, и как можно обходится вообще без границы.
Пример 1
<table bgcolor=»#D2691E»right» cellspacing=»8″&gt
&nbsp &nbsp <tr align=»center» bgcolor=»gray»&gt
&nbsp &nbsp &nbsp &nbsp<td &gtЯчейка</td&gt
&nbsp &nbsp &nbsp &nbsp<td &gtЯчейка</td&gt
&nbsp &nbsp &lt/tr&gt
Ячейка Ячейка
Ячейка Ячейка
&nbsp &nbsp <tr align=»center» bgcolor=»silver»&gt
&nbsp &nbsp &nbsp &nbsp<td&gtЯчейка</td&gt
&nbsp &nbsp &nbsp &nbsp<td&gtЯчейка</td&gt
&nbsp &nbsp &lt/tr&gt
&lt/table&gt
Пример 2
<tableright» cellspacing=»0″&gt
&nbsp &nbsp <tr align=»center»&gt
&nbsp &nbsp &nbsp &nbsp<td bgcolor=»Yellow» &gtЯчейка</td&gt
&nbsp &nbsp &nbsp &nbsp<td bgcolor=»Blue» &gtЯчейка</td&gt
&nbsp &nbsp &lt/tr&gt
Ячейка Ячейка
Ячейка Ячейка
&nbsp &nbsp <tr align=»center»&gt
&nbsp &nbsp &nbsp &nbsp<td bgcolor=»red»&gtЯчейка</td&gt
&nbsp &nbsp &nbsp &nbsp<td bgcolor=»green»&gtЯчейка</td&gt
&nbsp &nbsp &lt/tr&gt
&lt/table&gt

Поделиться с друзьями
На главную&nbsp &nbsp Дальше

css — как изменить цвет фона первой строки в таблице html, а все остальные строки чередуют цвет
спросил 7 лет, 11 месяцев назад
Изменено 7 лет, 11 месяцев назад
Просмотрено 25 тысяч раз
Я хочу изменить цвет фона первой строки, а все остальные строки под ней будут иметь альтернативный цвет, т. е. даже нечетную концепцию. в настоящее время я применяю css для альтернативного цвета, например:
.table-striped tbody tr:nth-child(odd) td { цвет фона: #81DAF5; } .table-striped tbody tr:nth-child(even) td { цвет фона: #CEECF5; } .table-striped tbody tr.highlight td { цвет фона: #F2F5A9; }
здесь, .table-striped — класс таблицы. Итак, как я могу изменить цвет первой строки на другой цвет, например красный.
вывод вышеуказанного css:
html
CSS
2
Вы можете использовать псевдокласс :first-child, он поддерживается всеми браузерами.
Псевдокласс CSS :first-child представляет любой элемент, являющийся первый дочерний элемент своего родителя.
Элемент синтаксиса: first-child { свойства стиля }
Добавлено в ваш CSS:
. table-striped tbody tr:nth-child(odd) td { цвет фона: #81DAF5; } .table-striped tbody tr:nth-child(even) td { цвет фона: #CEECF5; } .table-striped tbody tr.highlight td { цвет фона: #F2F5A9; } .table-striped tbody tr:first-child td { цвет фона: #FF0000; }
JSFiddle
Редактировать : Как отметил wrick17, добавленное правило первого дочернего элемента должно быть помещено внизу, поскольку в противном случае оно будет переопределено.
2
если вы специально хотите изменить свойство первой строки, используйте селектор первого дочернего элемента
.table-striped tbody tr:first-child td { фон: красный; }
http://jsfiddle.net/zgejvLyr/1/
Использовать селектор css первого дочернего элемента
.table-striped tbody tr:first-child td{ цвет фона: красный;}
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Как заполнить всю ячейку цветом фона в ОДНОЙ ячейке таблицы внутри класса
Задавать вопрос
спросил 6 лет, 5 месяцев назад
Изменено 6 лет, 5 месяцев назад
Просмотрено 3к раз
У меня есть строка таблицы внутри таблицы, а внутри этой строки таблицы у меня есть четыре объектов:
<таблица> Главная Перейти к каналу Другие вещи, которые я люблю делать О
В моем css я пытаюсь выбрать первый из четырех, например: #вершина { высота: 65 пикселей; цвет фона: черный; верхняя граница: 20px; } #top tr:first-child td:nth-child(1) { цвет фона:#00F; }
Я нашел похожие ответы:
Один ответ
Другой ответ
Снова другой ответ
Тем не менее, ни один из них не работает, и я мог бы даже поместить туда больше ответов, которые не работают, но я думаю, что этого достаточно.