Главная » Языки программирования

Table and css class

Содержание
  1. W3.CSS Таблицы
  2. Пример
  3. Полосатая таблица
  4. Пример
  5. Таблица с границами
  6. Пример
  7. Полосатая таблица с границами
  8. Пример
  9. Граница вокруг таблицы
  10. Пример
  11. Отображение всего сразу
  12. Пример
  13. Перевёрнутые полосы
  14. Пример
  15. Центрирование всего содержимого
  16. Пример
  17. Центрирование одного столбца
  18. Пример
  19. Выравнивание по правому краю содержимого одного столбца
  20. Пример
  21. Таблица при наведении
  22. Пример
  23. Цвета при наведении
  24. Пример
  25. Комбинирование W3.CSS классов
  26. Цветной заголовок таблицы
  27. Пример
  28. Цветная таблица
  29. Пример
  30. Отзывчивая (адпативная) таблица
  31. Пример
  32. Таблица как карточка
  33. Пример
  34. Крошечная (уменьшенная) таблица
  35. Пример
  36. Маленькая таблица
  37. Пример
  38. Большая таблица
  39. Пример
  40. Более крупная (XLarge) таблица
  41. Пример
  42. XXLarge Таблица
  43. Пример
  44. XXXLarge таблица
  45. Пример
  46. Гигантская (jumbo) таблица
  47. Пример
  48. ПАЛИТРА ЦВЕТОВ
  49. ПРИСОЕДИНЯЙТЕСЬ!
  50. Связь с админом
  51. Топ Учебники
  52. Топ Справочники
  53. Топ Примеры
  54. Веб Сертификаты
  55. W3.CSS Tables
  56. Example
  57. Striped Table
  58. Example
  59. Bordered Table
  60. Example
  61. Striped Bordered Table
  62. Example
  63. Border Around a Table
  64. Example
  65. Displaying it All
  66. Example
  67. Flipping the Stripes
  68. Example
  69. Centering all Content
  70. Example
  71. Centering one Column
  72. Example
  73. Right Align one Column
  74. Example
  75. Hoverable Table
  76. Example
  77. Hover Colors
  78. Example
  79. Combining W3.CSS Classes
  80. Colored Table Header
  81. Example
  82. Colored Table
  83. Example
  84. Responsive Table
  85. Example
  86. Table as a Card
  87. Example
  88. Tiny Table
  89. Example
  90. Small Table
  91. Example
  92. Large Table
  93. Example
  94. XLarge Table
  95. Example
  96. XXLarge Table
  97. Example
  98. XXXLarge Table
  99. Example
  100. Jumbo Table
  101. CSS Style for Html Table Element

W3.CSS Таблицы

Класс w3-table используется для отображения базовой таблицы:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Полосатая таблица

Класс w3-striped используется для добавления эффекта зебры в таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Таблица с границами

Класс w3-bordered добавляет нижнюю границу к каждой строке таблицы:

Читайте также:  Java stream string joining
Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Полосатая таблица с границами

Объедините класс w3-striped и класс w3-bordered, чтобы создать полосатую таблицу с границами:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Граница вокруг таблицы

Класс w3-border используется для отображения границы вокруг таблицы:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Примечание: Класс w3-border не только для таблиц. Он может использоваться на любом элементе HTML!

Отображение всего сразу

Класс w3-table-all комбинирует все выше перечисленные классы:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Перевёрнутые полосы

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Пример

Центрирование всего содержимого

Класс w3-centered центрирует содержимое таблицы:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Центрирование одного столбца

Класс w3-center центрирует содержимое столбца:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Выравнивание по правому краю содержимого одного столбца

Класс w3-right-align выравнивает по правому краю содержимое столбца:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Таблица при наведении

Класс w3-hoverable добавляет серый цвет фона при наведении мыши:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Цвета при наведении

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Комбинирование W3.CSS классов

Многие классы W3.CSS могут быть использованы для всех элементов HTML.

Например: классы границ, классы цветов, классы шрифтов, классы карт и многое другое.

Цветной заголовок таблицы

Используйте любой из классов w3-color для отображения цветной строки:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Цветная таблица

Используйте любой из классов w3-color для отображения цветной таблицы:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Отзывчивая (адпативная) таблица

Класс w3-responseive создает адаптивную таблицу. Таблица будет прокручиваться горизонтально на маленьких экранах. При просмотре на больших экранах разницы нет.

Измените размер экрана, чтобы увидеть эффект в таблице ниже:

Имя Фамилия Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Пример

Таблица как карточка

Используйте класс w3-card чтобы отобразить таблицу как карточку:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Крошечная (уменьшенная) таблица

Используйте класс w3-tiny, чтобы отобразить крошечную таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Маленькая таблица

Используйте класс w3-small, чтобы отобразить маленькую таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Большая таблица

Используйте класс w3-large, чтобы отобразить большую таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Более крупная (XLarge) таблица

Используйте класс w3-xlarge, чтобы отобразить более крупную (xlarge) таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

XXLarge Таблица

Используйте класс w3-xxlarge, чтобы отобразить xxlarge таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

XXXLarge таблица

Используйте класс w3-xxxlarge, чтобы отобразить xxxlarge таблицу:

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

Гигантская (jumbo) таблица

Используйте класс w3-jumbo, чтобы отобразить гигантскую (jumbo) таблицу:

Имя Фамилия
Jill Smith
Eve Jackson
Adam Johnson

Пример

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник

W3.CSS Tables

The w3-table class is used to display a basic table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Striped Table

The w3-striped class is used to add zebra-stripes to a table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Bordered Table

The w3-bordered class adds a bottom border to each table row:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Striped Bordered Table

Combine the w3-striped class and the w3-bordered class to create a striped bordered table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Border Around a Table

The w3-border class is used to display a border around a table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Tip: The w3-border class is not only for tables. It can be used on any HTML element!

Displaying it All

The w3-table-all class combines all of the classes above:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Flipping the Stripes

To flip the stripes (start with the light-grey color), add a element around the table header row. You must also define a color to be used for the table header row:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Example

Centering all Content

The w3-centered class centers the content of the table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Centering one Column

The w3-center class centers the content of a column:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Right Align one Column

The w3-right-align class right aligns the content of a column:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Hoverable Table

The w3-hoverable class adds a grey background color on mouse-over:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Hover Colors

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Combining W3.CSS Classes

Many W3.CSS classes can be used on all HTML elements.

For example: border classes, color classes, font classes, card classes, and more.

Colored Table Header

Use any of the w3-color classes to display a colored row:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Colored Table

Use any of the w3-color classes to display a colored table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Responsive Table

The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.

Resize the screen to see the effect on the table below:

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Example

Table as a Card

Use a w3-card class to display a table as a card:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Tiny Table

Use the w3-tiny class to display a tiny table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Small Table

Use the w3-small class to display a small table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Large Table

Use the w3-large class to display a large table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

XLarge Table

Use the w3-xlarge class to display an xlarge table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

XXLarge Table

Use the w3-xxlarge class to display an xxlarge table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

XXXLarge Table

Use the w3-xxxlarge class to display an xxxlarge table:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

Jumbo Table

Use the w3-jumbo class to display a jumbo large table:

First Name Last Name
Jill Smith
Eve Jackson
Adam Johnson

Источник

CSS Style for Html Table Element

here you learn how to write CSS Style for Html Table Element, we can design beautiful table for your all WebPages, and to keep them standard throughout the application we can write all style in single CSS class, then call that class on any html element.

Table is another commonly used element in HTML, so while designing website it’s necessary to create a common design for all the tables across the web pages.

One way you can write class for table row, header and footer, but another way to do it writing just one class and specifying different CSS properties for each Table element.

Here is how you should write CSS class for html table

.tableCss < border: solid 1px #e6e5e5; >/*for header*/ .tableCss thead < background-color: #0094ff; color:#fff; padding: 10px; text-align:center; >.tableCss td < border: solid 1px #e6e5e5; padding: 10px; >/*for footer*/ .tabTask tfoot < background-color: #000; color: #fff; padding: 10px; >/*for body*/ .tabTask tbody

Now if you call the able class in a table, just mention the class name , this is how the table will look like.

CSS on Table Header Example
Country Currency
India INR
USA USD
UK GBP
Australia AUD
CSS on Table Footer Example

Now if you want to add a hover effect on table row, just add below line to same class

As you can see in above example, we have written some css properties for hover effect, similarly you can define css properties for text, hyperlink etc.

Источник

Оцените статью
© 2024 Программирование