W3.CSS - Tavoli

W3.CSS può essere utilizzato per visualizzare diversi tipi di tabelle utilizzando vari stili su w3-table.

Sr. No. Nome e descrizione della classe
1

w3-table

Rappresenta una tabella di base senza alcun bordo.

2

w3-striped

Visualizza una tabella spogliata.

3

w3-bordered

Disegna una tabella con un bordo tra le righe.

4

w3-border

Disegna una tabella con bordi.

5

w3-card

Disegna un tavolo come una carta.

6

w3-responsive

Disegna una tabella reattiva per mostrare una barra di scorrimento orizzontale, se lo schermo è troppo piccolo per visualizzare il contenuto.

7 w3-tiny

Disegna una tabella con caratteri molto piccoli.

8

w3-small

Disegna una tabella con caratteri piccoli.

9

w3-large

Disegna una tabella con caratteri grandi.

10

w3-xlarge

Disegna una tabella con caratteri extra large.

11

w3-xxlarge

Disegna una tabella con caratteri molto extra large.

12

w3-xxxlarge

Disegna una tabella con caratteri extra large molto alti.

13

w3-jumbo

Disegna una tabella con caratteri grandi jumbo.

Esempio

w3css_tables.htm

<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>

Risultato

Verifica il risultato.