Учебники

W3.CSS — Таблицы

Ноябрь 23, 2018

W3.CSS может использоваться для отображения разных типов таблиц с использованием различных стилей над таблицей w3.

Старший Имя класса и описание
1

w3 стол

Представляет базовую таблицу без каких-либо границ.

2

w3-полосатый

Отображает раздетую таблицу.

3

w3 каймой

Рисует таблицу с рамкой между рядами.

4

w3-граница

Рисует таблицу с границами.

5

w3-карты

Рисует стол как карту.

6

w3 реагирующих

Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.

7 w3-крошечное

Рисует таблицу с очень маленьким шрифтом.

8

w3-маленький

Рисует таблицу мелким шрифтом.

9

w3-большой

Рисует таблицу крупным шрифтом.

10

w3-XLarge

Рисует таблицу с очень крупным шрифтом.

11

w3-XXLarge

Рисует таблицу с очень очень крупным шрифтом.

12

w3-XXXLarge

Рисует таблицу с очень высоким очень крупным шрифтом.

13

w3-джамбо

Рисует таблицу с большим шрифтом.

w3 стол

Представляет базовую таблицу без каких-либо границ.

w3-полосатый

Отображает раздетую таблицу.

w3 каймой

Рисует таблицу с рамкой между рядами.

w3-граница

Рисует таблицу с границами.

w3-карты

Рисует стол как карту.

w3 реагирующих

Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.

w3-маленький

Рисует таблицу мелким шрифтом.

w3-большой

Рисует таблицу крупным шрифтом.

w3-XLarge

Рисует таблицу с очень крупным шрифтом.

w3-XXLarge

Рисует таблицу с очень очень крупным шрифтом.

w3-XXXLarge

Рисует таблицу с очень высоким очень крупным шрифтом.

w3-джамбо

Рисует таблицу с большим шрифтом.

пример

w3css_tables.htm

Live Demo

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Результат

Проверьте результат.

45
Share: