W3.CSS可用于在w3-table上使用各种样式显示不同类型的表.
| 锶.不. | 类名&描述 |
|---|---|
| 1 | w3-table 表示没有任何边框的基本表. |
| 2 | w3-striped 显示剥离的表. |
| 3 | w3-bordered 绘制一个跨行的边框表. |
| 4 | w3-border 绘制带边框的表. |
| 5 | w3-card 将一张桌子作为一张牌. |
| 6 | w3-responsive 绘制响应表以显示水平滚动条，如果屏幕太小，无法显示内容. |
| 7 | w3-tiny 绘制一张非常小的表格字体. |
| 8 | w3-small 绘制一个小字体的表格. |
| 9 | w3-large 绘制一个大字体的表格. |
| 10 | w3-xlarge 绘制一张超大的表格字体. |
| 11 | w3-xxlarge 绘制一个非常大字体的表格. |
| 12 | w3-xxxlarge 绘制一个非常高的超大字体表. |
| 13 | w3-jumbo 抽奖一张桌子ith jumbo large font. |
<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>
验证结果.
