Оволодіння адаптивними таблицями за допомогою Foundation

Ура! Ви успішно подорожували містичною землею HTML та PHP, ви відважно боролися в межах CSS, і зараз стоїте на краю ще однієї великої пригоди – Responsive Tables!
Не бійтеся, о мужній кодере, це не непереможний виклик.
Давайте розберемо цю подорож на засвоєння частин.

Що таке Responsive Table?

Ну, це перший етап нашого скромного героя, Responsive Table. Уявіть традиційний стіл, що наповнений інформацією зліва направо, зверху донизу. Але почекайте! Розмір вашого екрану змінюється, і отже, наш колись красивий стіл перетворюється на велетенського і незчитаного. Responsive Tables на допомогу!

Основи Responsive Tables

Підвищте свої щити, ось складність!
Жартую. Ми маємо справу з Foundation, дружнім CSS фреймворком. Цей шляхетний фреймворк переконався, що не залишить нашого друга, Responsive Table, тіньовим.

Дружба з фреймворком Foundation

Давайте почнемо з простого столу, ви знаєте, того, що руйнується, коли екрани грають у гру розмірів. Foundation дозволяє легко перетворити їх на Responsive Tables, просто додаючи клас до вашого столу! Так, це дійсно настільки просто! Вам просто потрібно додати клас “.responsive”, так:

<table class="responsive">
    <!-- Сюди йдуть ваші заповнені рядки та стовпці -->
</table>

Один Розмір Підходить Всім

Мета полягає в тому, щоб змінювати розмір таблиці відповідно до розміру екрану. Коли екран занадто малий для таблиці, Foundation розміщує клітинки вертикально, зроблюючи дані читабельними, а дизайн – чистим.

Зробіть Це Працюючим

Час діяти. Ось як застосувати клас responsive table.

<table class="responsive">
    <thead>
        <tr>
          <th>Герої</th>
            <th>Злочинці</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Супермен</td>
            <td>Люкс Лютер</td>
        </tr>
        <tr>
            <td>Бетмен</td>
            <td>Джокер</td>
        </tr>
    </tbody>
</table>

Функції Зворотного Виклику

Foundation також надає функції зворотного виклику. Хто тепер тут бос?

$(document).foundation('table', {
  callback : function(){
  // робіть тут щось класне...
 }
});

Дослідження Можливостей Стилізації

Foundation відкриває цілий світ можливостей стилізації для ваших таблиць. Налаштовуйте рамки, смугастість та стани при наведенні. Ви навіть можете додати трошки жвавості з анімованими смугами прогресу в рядках таблиці.
Ось і все! Приручайте дикі таблиці за допомогою чудового фреймворку Foundation. Пам’ятайте, що адаптивний сайт – це щасливий сайт, а таблиці лише частина цього мальовничого ландшафту.
Перш ніж ми підемо – відпочиньте, молодий розробнику. Пам’ятайте, що кодування це весело. Якщо це не так, ви або робите щось не так, або читаєте не ту книгу!
А тепер, підкорюйте ці таблиці!