• ADS
• CSS
• EXCEL
• IMAGE-SERVER
• SCRIPTS
• SEO
• WEB-PAGE-LANGUAGES
• WEB-SERVER
• WEBSITE-MONITORING-AND-BACKUP
CSS |
W3.CSS |
TABLE
W3.CSS Tables
W3.CSS Table Classes
W3.CSS provides the following classes for tables:
- w3-table: Container for an HTML table. The w3-table class is used to display a basic table. View example (35)
- w3-striped: Striped table. The w3-striped class is used to add zebra-stripes to a table. View example (36)
- w3-bordered: Bordered lines. The w3-bordered class adds a bottom border to each table row. View example (37). The w3-border class is used to display a border around any element. View example (38)
- w3-centered: Centered whole table content. If we want to align any coloumn, we use w3 text alignment classes (w3-left-align, w3-right-align and w3-center). View example (40)
- w3-hoverable: Hoverable table. The w3-hoverable class adds a grey background color on mouse-over on table. View example (41)
- w3-table-all: The w3-table-all class combines w3-table, w3-border, w3-bordered and w3-striped classes. View example (39)
- Colouring the table: we use w3-color class to colour the table. View example (42)
- Responsive table: The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference. View example (43)
Table with shadow
We can add w3-card-2 or w3-card-4 with table to give 2px/4px shadow.
With shadow -
View example (38) |
View example (41)Without shadow -
View example (40)
Large Table
We can increase the font size of text element of a table using various
w3-size classes (w3-tiny, w3-small, w3-medium, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.)
View example (44)