Как сделать прозрачную таблицу в html
.first background: #7caee1; opacity: 0.5; filter: alpha(Opacity=50); > .second background: #7caee1; opacity: 1; filter: alpha(Opacity=100); >
В результате чего получаем такую картину
Для справки
Важно помнить, что при использовании свойства filter код не пройдет проверку на валидацию.
В каких браузерах работает?
| 5.5+ | 1.0+ | 9.0+ | 2.0+ | 3.5+ | 2.0+ | 2.0+ |
Таблица без рамки
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.
Рис. 1. Вид таблицы без рамки
Для изменения цвета фона таблицы используем свойство background , добавляя его к селектору TABLE . Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).
Пример 1. Создание таблицы без рамки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
Пример 2. Выравнивание с помощью тега
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
Атрибут align тега указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег работает только для одной колонки.
Выравнивание содержимого колонок с помощью тега работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.
Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
Таблица 2004 2005 2006
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут class=»jewel» . Результат примера показан на рис. 2.
Рис. 2. Таблица без рамки с выделенной левой колонкой
Как сделать прозрачную таблицу в html
Как сделать фон таблицы прозрачным?
Ответ мастера:
В возможности текстового редактора входят не только набор и изменение текста. Существует еще много разнообразных функций, среди которых есть и создание таблиц. Сначала посмотрите, какая у вас версия текстового редактора. В ранних версиях, для того, чтобы вставить таблицу, нужно в панели инструментов перейти к «Вставка» и там выбрать «Вставить таблицу». А в более поздних версиях уже не надо искать функцию в меню, потому что она вынесена отдельной иконкой. Но самой сути это не меняет.
Если вы часто строите таблицы, то даже в ранних версиях программы можете вынести требуемую иконку на панель инструментов. Чтобы сделать прозрачную таблицу, следует перейти в пункт меню «Вставка» или кликнуть по нужной иконке. Затем нужно выбрать способ, по которому создавать таблицу.
Для создания используйте один из двух вариантов – «Вставить таблицу» или же «Нарисовать таблицу». Какой выбрать вариант и где его применить? Если вам нужна простая таблица с прозрачным фоном, без сложных элементов и стандартной формы, то лучше выбрать пункт «Вставить таблицу». Если же форма ячеек должна быть особенной, то в таком случае лучше рисовать вручную.
Для того, чтоб сделать фон таблицы прозрачным, кликните по ней правой кнопкой мыши. В появившемся меню выберите «Свойства таблицы». Потом перейдите во вкладку «Таблица» и найдите там пункт «Граница и заливка».
Теперь перейдите к пункту «Цвет». Выберите там нужный параметр для того, чтоб ваша таблица стала прозрачной. Запомните, что цвет линий на таблице должен немного отличаться от цвета ее фона, в ином случае таблица пропадет вообще. Также можно сделать прозрачной только некоторую часть таблицы. Для этого выделите нужные элементы, а потом повторите все то, что написано выше.
Как установить таблицу полупрозрачной, а часть ячеек нет?
Задать значение полупрозрачности для всей таблицы, а отдельные ячейки сделать непрозрачными..
Решение
Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity , его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X) , где X может меняться от 0 до 100.
Чтобы сделать таблицу полупрозрачной, достаточно к селектору TABLE добавить opacity: 0.5 . Возникает соблазн аналогичное действие проделать и с селектором TD , только задав ему opacity: 1 . Однако ожидаемого результата не произойдет, ячейка останется полупрозрачной. Все оттого, что дочерние элементы не могут превысить значение opacity у родителя. Поэтому следует действовать от обратного, установив opacity: 0.5 для селектора TD . Для тех ячеек, где прозрачность не нужна, надо ввести свой класс, добавив для него opacity: 1 , как показано в примере 1.
Пример 1. Непрозрачные ячейки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Прозрачность ячеек Леонардо 5 8 Микеланджело 24 9 Донателло 2 13
Результат данного примера показан на рис. 1. В примере используется класс с именем trans , при его добавлении к ячейкам, они становятся непрозрачными.
Рис. 1. Полупрозрачные и непрозрачные ячейки в таблице
Из-за того, что свойство filter не входит в спецификацию CSS и является нестандартным, стиль с ним не пройдет валидацию.