Thursday, March 16, 2017

W3.CSS - Tables

W3.CSS can be used to display different types of tables using various styles over w3-table.
Class NameDescription
w3-tableRepresents a basic table without any border.
w3-stripedDisplays a stripped table.
w3-borderedDraws a table with a border across rows.
w3-borderDraws a table with borders.
w3-cardDraws a table as a card.
w3-responsiveDraws a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.
w3-tinyDraws a table with very small font.
w3-smallDraws a table with small font.
w3-largeDraws a table with large font.
w3-xlargeDraws a table with extra large font.
w3-xxlargeDraws a table with very extra large font.
w3-xxxlargeDraws a table with very high extra large font.
w3-jumboDraws a table with jumbo large font.

Example

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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)