html и css для начинающих

кнопка удаления
кнопка удаления
кнопка меню

Стилизация таблиц c помощью CSS

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

Ширина и высота таблицы


Ширину таблицы можно указать с помощью свойства width (в качестве значений принимаются любые единицы длины).
Table-layout - Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Значения:

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

Свойства border-top и bоrdеr-bоttоm


Свойства border-top и bоrdеr-bоttоm позволяют одновременно установить толщину (border-width), стиль (border-style) и цвет границы (border-color) сверху или снизу элемента (строки, заголовка и т.п. )Значения могут идти в любом порядке, разделяясь пробелом. Это удобно, если не используется свойство border.

tabletopbotom

Заголовок таблицы


Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align

tablecolor

Границы ячеек


C помощью универсального свойства border можно одновременно установить толщину (border-width), стиль (border-style) и цвет границы таблицы и ячеек (border-color).Значения могут идти в любом порядке, разделяясь пробелом.
Для установки границы только на определенных сторонах элемента, можно использовать border-top, border-bottom, border-left, border-right.

border2

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

emptycss

Ячейка считается пустой в следующих случаях:

empty

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

bordercollapse

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

bborderspasing
tablecspasing

Цвет фона таблицы и псевдокласс :hover

Псевдокласс : hover определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Так же можно установить цвет фона таблицы, с помощью свойства background-color.

hovercss
hover

Стили для текста, ячеек и строк


Свойство letter-spacing определяет интервал между символами в пределах элемента. В качестве значений принимаются любые единицы длины, принятые в CSS.

Свойство font-size - устанавливает размер шрифта, а свойство text-transform - используется для переключения регистра заголовков таблицы на верхнийи.