Таблица с HTML атрибутами и стилями CSS — различия между версиями

Материал из ПримаВики
Перейти к: навигация, поиск
(ТАБЛИЦЫ С CТИЛЯМИ СSS)
(ДЛЯ ЛЮБОЗНАТЕЛЬНЫХ)
 
Строка 225: Строка 225:
 
Эта энциклопедия стала настолько популярной и настолько значимой для миллионов пользователей интернета, что про нее был снят довольно познавательный фильм, который вы можете посмотреть с русским переводом.
 
Эта энциклопедия стала настолько популярной и настолько значимой для миллионов пользователей интернета, что про нее был снят довольно познавательный фильм, который вы можете посмотреть с русским переводом.
 
{|  
 
{|  
  |{{#ev:youtube|QdHfIRaxbsI#!|180|}}
+
  |{{#ev:youtube|QdHfIRaxbsI#!|180|auto}}
 
|}
 
|}
  
 
[[Категория: Методическая копилка]]
 
[[Категория: Методическая копилка]]

Текущая версия на 13:09, 14 декабря 2013

20 июня четверг 20 июня 2019

Автор:Максименко Е.А.

ТАБЛИЦЫ С CТИЛЯМИ СSS

Золотой запас1.jpg Золотой запас ПримВики 2013

Таблицы CSS (Cascading Style Sheets-таблицы каскадных стилей) являются грандиозным прорывом в области Web-дизайна.Таблицы стилей могут существенно сократить объем работы.
Стили CSS – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы,используются вместе с другими HTML атрибутами или отдельно.

Таблица-две ячейки со стилями CSS вместе с другими HTML атрибутами

  • style="margin: 1cm 5cm;color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="10" border="1"
атрибут margin отступ от верхнего края 1сm, слева 5cm
атрибут color цвет текста:green
атрибут background-color цвет фона таблицы:#ffffcc
атрибут cellpadding расстояние между границей ячейки и ее содержимым 20
атрибут cellspacing расстояние между внешними границами ячеек 10
атрибут border границы вокруг ячеек таблицы 1

Таблица-две ячейки со стилями CSS вместе с другими HTML атрибутами

  • style="margin: 2cm 2cm;color:red;background-color:Deepskyblue;" cellpadding="10" cellspacing="20" border="3"
атрибут margin отступ от верхнего края 1сm, слева 5cm
атрибут color цвет текста:red
атрибут background-color цвет фона таблицы:Deepskyblue
атрибут cellpadding расстояние между границей ячейки и ее содержимым 10
атрибут cellspacing расстояние между внешними границами ячеек 20
атрибут border границы вокруг ячеек таблицы 3

Таблица-две ячейки со стилями CSS вместе с другими HTML атрибутами

  • style="margin: auto;color:#ffffff;background-color:red;" cellpadding="5" cellspacing="5" border="5"
атрибут margin размер отступов будет автоматически рассчитан браузером: auto
атрибут color цвет текста:#ffffff
атрибут background-color цвет фона таблицы:red
атрибут cellpadding расстояние между границей ячейки и ее содержимым 5
атрибут cellspacing расстояние между внешними границами ячеек 5
атрибут border границы вокруг ячеек таблицы 10

Таблица-одна ячейка со стилями CSS вместе с другими HTML атрибутами

  • style="width: 100%; height: 60px; align:center; background-color: red; border: 10px solid #33ccff; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; "
атрибут width: 100%-ширина таблицы, атрибут height: 60px- высота таблицы, атрибут align:center - выравнивает таблицу по центру, атрибут background-color-цвет фона таблицы, атрибуты border: 10px и solid #33ccff - толщина и цвет границы таблицы, атрибут -moz-border-radius-topleft: 8px - радиус скругления левого верхнего уголка таблицы 8px,атрибут -moz-border-radius-bottomleft: 8px - радиус скругления левого нижнего уголка таблицы 8px, атрибут -moz-border-radius-topright: 8px - радиус скругления правого верхнего уголка таблицы 8px, атрибут -moz-border-radius-bottomright: 8px - радиус скругления правого нижнего уголка таблицы 8px.
АНАЛОГИЧНО С ЯЧЕЙКАМИ.
Радиус скругления уголка таблицы отображает браузер Mozilla Firefox, браузеры: Google Chrome,Opera,Exploer не отображают.

DIV - контейнер можно применять в дизайне вики-странички

Таблицы HTML В ТАБЛИЦАХ ВИКИ

С Юбилеем ПримВики!

Весна пришла!
«Пришла! Пришла!» Наполнив смыслом
Всё то, что дышит и живёт,
Избавив нас от мрачных мыслей

Весна пришла! Весна идёт!
71377989 spring.gif

maxilena

С 5-летием ПримВики!
Весеннего настроения!
1561720.gif

Код таблицы с атрибутами HTML - одна cтрока и одна ячейка

<table WIDTH=100% style="border:5px solid #990000" bgColor="#87CEFA" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:5px"><font color="FFFFFF" size="2">В первой таблице одна ячейка</font>
</td>
</tr>
</table>
Отображение таблицы на странице

'
В первой таблице одна ячейка

TABLE - элемент для создания таблицы. Обязательно должен иметь начальный <table> и конечный </table> теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Стороки внутри таблицы создаются с помощью элементов <TR> и </TR>, ячейки <TD> и </TD> или <TH> и </TH>.

ВЛОЖЕННЫЕ ТАБЛИЦЫ HTML

в первой таблице
во второй таблице
в третьей таблице
в четвёртой таблице
в пятой таблице
в шестая таблице
в седьмой таблице
918737728 (1).gif

одна ячкейка

одна ячкейка

одна ячкейка

одна ячкейка

одна ячкейка

одна ячкейка

одна ячкейка

ДЛЯ ЛЮБОЗНАТЕЛЬНЫХ

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