W3.CSS Tables






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



W3.CSS Tables



❮ Previous
Next ❯



































First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35


W3.CSS Table Classes


W3.CSS provides the following classes for tables:



































Class Defines
w3-table Container for an HTML table
w3-striped Striped table
w3-border Bordered table
w3-bordered Bordered lines
w3-centered Centered table content
w3-hoverable Hoverable table
w3-table-all All properties set


Basic Table


The w3-table class is used to display a basic table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table">
<tr>
  <th>First Name</th>
 
<th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>

Try It Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Striped Table


The w3-striped class is used to add zebra-stripes to a table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table w3-striped">

Try It Yourself »


Bordered Table


The w3-bordered class adds a bottom border to each table row:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table w3-bordered">

Try It Yourself »


Striped Bordered Table


Combine the w3-striped class and the w3-bordered class to create a striped bordered table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table w3-striped w3-bordered">

Try It Yourself »


Border Around a Table


The w3-border class is used to display a border around a table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table w3-striped w3-border">

Try It Yourself »


Tip: The w3-border class is not only for tables. It can be used on any HTML element!




Displaying it All


The w3-table-all class combines all of the classes
above:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all">

Try It Yourself »


Flipping the Stripes


To flip the stripes (start with the light-grey color), add a <thead> element around the table header row.
You must also define a color to be used for the table header row:




























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35


Example



<thead>
  <tr class="w3-light-grey">
    <th>First Name</th>
   
<th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>

Try It Yourself »



Centering Content


The w3-centered class centers the content of the table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-centered">

Try It Yourself »



Hoverable Table


The w3-hoverable class adds a grey background color on
mouse-over:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all
w3-hoverable">

Try It Yourself »


Hover Colors


If you want a specific hover color, add any of the w3-hover-color classes
to each <tr> element:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<tr class="w3-hover-green">

Try It Yourself »


Combining W3.CSS Classes


Many W3.CSS classes can be used on all HTML elements.


For example: border classes, color classes, font classes, card classes, and
more.




 Colored Table Header


Use any of the w3-color classes to display a colored row:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<tr class="w3-red">
  <th>First Name</th>
  <th>Last
Name</th>
  <th>Points</th>
</tr>

Try It Yourself »



Colored Table


Use any of the w3-color classes to display a colored table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table w3-blue">

Try It Yourself »



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.


Resize the screen to see the effect on the table below:

































































First Name Last Name Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700




Example



<div class="w3-responsive">
  <table class="w3-table-all">
   
... table content ...
  </table>
</div>

Try It Yourself »



Table as a Card


Use a w3-card class to display a table as a card:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-card-4">

Try It Yourself »


Tiny Table


Use the w3-tiny class to display a tiny table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-tiny">

Try It Yourself »


Small Table


Use the w3-small class to display a small table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-small">

Try It Yourself »


Large Table


Use the w3-large class to display a large table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-large">

Try It Yourself »


XLarge Table


Use the w3-xlarge class to display an xlarge table:























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-xlarge">

Try It Yourself »


XXLarge Table


Use the w3-xxlarge class to display an xxlarge table:
























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-xxlarge">

Try It Yourself »


XXXLarge Table


Use the w3-xxxlarge class to display an xxxlarge table:
























First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67


Example



<table class="w3-table-all w3-xxxlarge">

Try It Yourself »


Jumbo Table


Use the w3-jumbo class to display a jumbo large table:




















First Name Last Name
Jill Smith
Eve Jackson
Adam Johnson


Example



<table class="w3-table-all w3-jumbo">

Try It Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more