Html таблица адаптивная: Адаптивная таблица на чистом CSS – Адаптивная таблица для мобильных устройств

Leave a Comment / Html / By /

Адаптивная HTML таблица категорий сайта


   
  
  
  
  Стилистика
  

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/Metrasa.png»>
  <h5>
  <a href=»#»>
  Скрипты для сайта </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/zurydsaa.png»>
  <h5>
  <a href=»#»>
  Шаблоны для uCoz </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/MetroUI-Ap.png»>
  <h5>
  <a href=»#»>
  Меню для сайта </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/aretudsa.png»>
  <h5>
  <a href=»#»>
  Стили CSS </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/GCLPO.png»>
  <h5>
  <a href=»#»>
  Графика для сайта </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/ps-Win.png»>
  <h5>
  <a href=»#»>
  Мини профиль </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/Photoda.png»>
  <h5>
  <a href=»#»>
  Графика сайта </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/dsapps-Min.png»>
  <h5>
  <a href=»#»>
  JavaScript </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/kituydfsbv.png»>
  <h5>
  <a href=»#»>
  Новости блога </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/mudsruv.png»>
  <h5>
  <a href=»#»>
  Адаптивность </a>
  </h5>

  </li>
   
  <li> <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/lopas.png»>
  <h5>
  <a href=»#»>
  Создать сайт </a>
  </h5>

  </li>
</ul>
</div>

Адаптивные таблицы HTML с помощью плагина FooTable | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Рассмотренный сегодня плагин будет полезен тем, кто часто пользуется HTML таблицами для отображения данных на страницах. FooTable — это JQuery плагин, который стремится сделать HTML таблицы удобными для пользователей с мобильными устройствами, независимо от того, сколько столбцов в таблице.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!



Плагин FooTable - адаптивные HTML таблицы

HTML разметка

Для работоспособности плагина помимо самого скрипта и библиотеки jQuery, понадобится еще и файл css со стилями. После подключения всего необходимо плагин можно использовать. Плагин настраивается с помощью атрибутов данных:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<table>
      <thead>
        <tr>
          <th data-class=»expand»>
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide=»phone,tablet»>
            Job Title
          </th>
          <th data-hide=»phone,tablet»>
            DOB
          </th>
          <th data-hide=»phone»>
            Status
          </th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>…</td>
          <td>…</td>
          <td>…</td>
          <td>…</td>
          <td>…</td>
        </tr>
        …
      </tbody>
<table>

Таким образом, вы можете сразу увидеть, что некоторые столбцы будут скрыты от телефонов и планшетов (data-hide=»phone,tablet»). Также все ячейки в первом столбце с классом «expand» — используется для вставки в каждую первую ячейку иконки плюс/минус, для индикации открытых или закрытых скрытых полей. Пример в демо версии.

Инициализация

Таблица готова осталось привязать к ней плагин и проверить что получилось.

1
2
3
4
5
6
7
8

  $(function() {
    $(‘.footable’).footable({
    breakpoints: {
      phone: 480,

      tablet: 1024
    }
    });
  });

При вызове плагина также можно задать свои размеры экрана, при которых скроются указанные столбцы. Т.е. при размере экрана менее 480px, скроются столбцы с пометкой phone.

Плагин для WordPress — WP-Table Reloaded


Плагин FooTable - адаптивные HTML таблицы

Продолжая «табличную тему», хотелось бы упомянуть о плагине для WordPress — WP-Table Reloaded. С его помощью можно легко создавать, экспортировать и импортировать таблицы/ Настраивать сортировку и тд. А вставка таблицы в записе производится с помощью короткого кода. Скачать ЗДЕСЬ.

Источник статьи/урока: https://xozblog.ru

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Адаптивная таблица (table) на jQuery

Таблицы являются неотъемлемой частью веб-дизайна. Они позволяют визуально организовать табличное содержимое, распределяя его по строкам и столбцам. Хотя они довольно просты в проектировании и кодировании больших экранов, все становится сложнее на небольших устройствах.

 

ДЕМО

ИСХОДНИКИ

 

Независимо от того, является ли это планом подписки или процессом оформления заказа, вы должны видеть все строки в своих проектах. Я заметил, что некоторые веб-сайты просто отсекают некоторые столбцы, чтобы сделать свои таблицы пригодными для телефона, но это решение не работает в большинстве случаев (по крайней мере, если вам нужны 5 + столбцы). Я предлагаю хороший пример таблицы, который позволяя пользователю горизонтально прокручивать столбцы.

Почему я не использовал структуру таблицы HTML и вместо этого пошел с неупорядоченными списками? Мне было трудно сделать этот ресурс адаптивным, используя правильную семантику таблицы. Поэтому я больше думал о стороне UX и о коде ниже.

 

Создание структуры

Мы использовали section как контейнер таблицы. Заголовок содержит функции (какие свойства мы сравниваем?). Причина, по которой столбцы и заголовок не упакованы в один и тот же div, заключается в том, что на мобильном телефоне заголовок фиксирован (в абсолютном положении), а родительский элемент, определяющий его позицию, является section. С другой стороны столбцы будут прокручиваться на меньших устройствах.

Как и ожидалось, данные столбцов — это просто элементы списка.

<section>
<header>
<h3>Features</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>...</li>
</ul>
</header>
<div>
<div>
<div>
<h3>Plan 1</h3>
<ul>
<li>1 GB</li>
 <li>2</li>
<li>...</li>
</ul>
</div> <!-- cd-table-column -->
<div>
<h3>Plan 2</h3>
<ul>
<li>2 GB</li>
<li>5</li>
<li>...</li>
</ul>
</div> <!-- cd-table-column -->
</div> <!-- cd-table-wrapper -->
</div> <!-- cd-table-container -->
</section>

 

Добавление стиля

Ничто не зацикливается на CSS. Просто одно замечание: мы обернули столбцы в 2 div, .cd-table-container и .cd-table-wrapper. Почему два, а не только один? Потому что я установил ширину первой из них равной 90% с помощью переполнения-x: auto, тогда как ширина второго поля задается суммой всех значений ширины столбцов. Таким образом, у меня может быть некоторый запас справа, и пусть контент прокручивается, если его ширина больше 90% от области просмотра.

Адаптивная таблица (table) на jQuery

 

Обработка событий

Мы использовали jQuery только для удаления небольшой стрелки вправо, которая появляется на маленьких экранах (чтобы указать, что можно прокручивать вправо), и тонкий градиент справа — который мы добавили, чтобы указать, что есть больше контента — в конце прокрутка.

Статья переведена с зарубежного источника!

 

Вот и всё!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


5 мощных техник адаптивного веб-дизайна

5 мощных техник адаптивного веб-дизайна

От автора: При увеличении количества устройств, применяемых для доступа в интернет (компьютеры, планшеты, смартфоны…), вам приходится гарантировать, что ваш веб-сайт будет смотреться хорошо в каждом из возможных устройств. В этой статье я собрал пять техник, суперполезных для отличного, более адаптивного сайта или веб-приложения.

Адаптивные изображения

Гибкие изображения – главный вопрос адаптивного дизайна. К счастью, довольно просто можно сделать свои изображения «гибими». Нижеприведенный код CSS гарантирует, что изображения будут максимально большими. Например, если изображение показывается внутри контейнера шириной в 600px, изображение будет 600px. Измените контейнер до 350px, и изображение автоматически уменьшится до максимально доступной ширины, в данном случае – 350 пикселей.

img { max-width: 100%; }

img {

     max-width: 100%;

}

Адаптивное видео HTML5

Раз спецификация HTML5 позволяет легко вставлять на свои страницы видеоролики, то почему бы этим не пользоваться? Сделать адаптивное видео HTML5 точно так же легко: просто добавьте в свой файл css следующий код и на этом все!

5 мощных техник адаптивного веб-дизайна

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

video { max-width: 100%; height: auto; }

video {

max-width: 100%;

height: auto;

}

Адаптивное видео YouTube

Как я вам только что показал, нет ничего сложного в том, чтобы сделать изображения или видеоролики html5 адаптивными. А как насчет видео с популярных сайтов? В самом деле, YouTube – самый знаменитый видео-хостинг, так что велики шансы на то, что вам однажды придется работать в видеороликами YouTube. Сначала рассмотрим этот код HTML:

<div> <iframe src=»//www.youtube.com/embed/dFVxGRekRSg» frameborder=»0″></iframe> </div>

<div>

         <iframe src=»//www.youtube.com/embed/dFVxGRekRSg» frameborder=»0″></iframe>

</div>

Затем добавим в файл CSS следующее:

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Ну вот, теперь ваши видеоролики YouTube адаптивные! Этот код также отлично работает с видеороликами Vimeo, что видно из примера ниже:

<div> <iframe src=»//player.vimeo.com/video/6284199?title=0&byline=0&portrait=0″ frameborder=»0″></iframe> </div>

<div>

<iframe src=»//player.vimeo.com/video/6284199?title=0&byline=0&portrait=0″ frameborder=»0″></iframe>

</div>

Адаптивное навигационное меню

Для посетителя навигационные меню – самый простой способ быстро отыскать то, что им требуется на вашем сайте. Но при просмотре веб-сайта на мобильном устройстве навигационные меню часто плохо читаются или ими слишком сложно пользоваться. По сути, для маленьких дисплеев гораздо удобнее применять выпадающие меню select вместо традиционных горизонтальных.

5 мощных техник адаптивного веб-дизайна

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот простая методика, которую можно внедрить на любом сайте. Начнем с HTML – создадим два меню: стандартное ul для обычных дисплеев и выпадающее select для мобильных устройств:

<nav> <ul> <li><a href=»/»>Home</a></li> <li><a href=»/collections/all»>Books</a></li> <li><a href=»/blogs/five-simple-steps-blog»>Blog</a></li> <li><a href=»/pages/about-us»>About Us</a></li> <li><a href=»/pages/support»>Support</a></li> </ul> <select> <option value=»» selected=»selected»>Select</option> <option value=»/»>Home</option> <option value=»/collections/all»>Books</option> <option value=»/blogs/five-simple-steps-blog»>Blog</option> <option value=»/pages/about-us»>About Us</option> <option value=»/pages/support»>Support</option> </select> </nav>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<nav>

 

  <ul>

    <li><a href=»/»>Home</a></li>

    <li><a href=»/collections/all»>Books</a></li>

    <li><a href=»/blogs/five-simple-steps-blog»>Blog</a></li>

    <li><a href=»/pages/about-us»>About Us</a></li>

    <li><a href=»/pages/support»>Support</a></li>

  </ul>

  

  <select>

    <option value=»» selected=»selected»>Select</option>

    

    <option value=»/»>Home</option>

    <option value=»/collections/all»>Books</option>

    <option value=»/blogs/five-simple-steps-blog»>Blog</option>

    <option value=»/pages/about-us»>About Us</option>

    <option value=»/pages/support»>Support</option>

  </select>

 

</nav>

А вот CSS. Здесь ничего сложного: мы по умолчанию скрываем select, а показываем его, только если ширина документа меньше 960px.

nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } }

nav select {

  display: none;

}

 

@media (max-width: 960px) {

  nav ul     { display: none; }

  nav select { display: inline-block; }

}

Адаптивные таблицы данных

Таблицы и адаптивный дизайн обычно не очень ладят между собой. Но вот действительно полезная техника, созданная вам в помощь разработчиком Крисом Койером (Chris Coyier) для адаптивных таблиц. Давайте начнем с создания обычной таблицы. Вот HTML…

<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> </tr> </thead> <tbody> <tr> <td>James</td> <td>Matman</td> <td>Chief Sandwich Eater</td> </tr> <tr> <td>The</td> <td>Tick</td> <td>Crimefighter Sorta</td> </tr> </tbody> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<table>

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Job Title</th>

</tr>

</thead>

<tbody>

<tr>

<td>James</td>

<td>Matman</td>

<td>Chief Sandwich Eater</td>

</tr>

<tr>

<td>The</td>

<td>Tick</td>

<td>Crimefighter Sorta</td>

</tr>

</tbody>

</table>

И CSS:

/* Обычные стили для десктопов/лэптопов */ table { width: 100%; border-collapse: collapse; } /* Черно-белые полоски */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/*

Обычные стили для десктопов/лэптопов

*/

table {

  width: 100%;

  border-collapse: collapse;

}

/* Черно-белые полоски */

tr:nth-of-type(odd) {

  background: #eee;

}

th {

  background: #333;

  color: white;

  font-weight: bold;

}

td, th {

  padding: 6px;

  border: 1px solid #ccc;

  text-align: left;

}

У нас получилась таблица с обычными стилями, теперь сделаем ее адаптивной. Мы собираемся сделать ничто иное, как заставить ее вести себя не как таблица, установив каждый связанный с таблицей элемент на block. Затем сохраним ее исходные черно-белые полосы, при этом каждая строка становится сама по себе таблицей, но шириной как экран. Не нужно горизонтальной прокрутки! Затем для каждой «ячейки» мы применим сгенерированный CSS контент (:before) для прикрепления метки, чтобы знать, что означает каждый фрагмент данных.

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Заставьте таблицу больше не вести себя как таблица */ table, thead, tbody, th, td, tr { display: block; } /* Скройте заголовки таблицы (но в целях доступности не с display: none;) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Поведение как у «строки» */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Теперь как у заголовка таблицы */ position: absolute; /* Значения top/left имитируют отступ */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Пометьте данные */ td:nth-of-type(1):before { content: «First Name»; } td:nth-of-type(2):before { content: «Last Name»; } td:nth-of-type(3):before { content: «Job Title»; } td:nth-of-type(4):before { content: «Favorite Color»; } td:nth-of-type(5):before { content: «Wars of Trek?»; } td:nth-of-type(6):before { content: «Porn Name»; } td:nth-of-type(7):before { content: «Date of Birth»; } td:nth-of-type(8):before { content: «Dream Vacation City»; } td:nth-of-type(9):before { content: «GPA»; } td:nth-of-type(10):before { content: «Arbitrary Data»; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

@media

only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px)  {

 

/* Заставьте таблицу больше не вести себя как таблица */

table, thead, tbody, th, td, tr {

display: block;

}

/* Скройте заголовки таблицы (но в целях доступности не с display: none;) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr { border: 1px solid #ccc; }

td {

/* Поведение как у «строки» */

border: none;

border-bottom: 1px solid #eee;

position: relative;

padding-left: 50%;

}

td:before {

/* Теперь как у заголовка таблицы */

position: absolute;

/* Значения top/left имитируют отступ */

top: 6px;

left: 6px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

}

/*

Пометьте данные

*/

td:nth-of-type(1):before { content: «First Name»; }

td:nth-of-type(2):before { content: «Last Name»; }

td:nth-of-type(3):before { content: «Job Title»; }

td:nth-of-type(4):before { content: «Favorite Color»; }

td:nth-of-type(5):before { content: «Wars of Trek?»; }

td:nth-of-type(6):before { content: «Porn Name»; }

td:nth-of-type(7):before { content: «Date of Birth»; }

td:nth-of-type(8):before { content: «Dream Vacation City»; }

td:nth-of-type(9):before { content: «GPA»; }

td:nth-of-type(10):before { content: «Arbitrary Data»; }

}

Автор: Jean

Источник: «http://www.catswhocode.com/

Редакция: Команда webformyself.

5 мощных техник адаптивного веб-дизайна

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее 5 мощных техник адаптивного веб-дизайна

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *