Tables visualize your data

Utilize tables to visually organize your data – a classic web design approach that proves the enduring relevance of tabular data.

Tables

Learn Tables

A table in HTML consists of a <table> element with table rows <tr> and table data cells <td>. To mark the heading of each column, you should use the table heading <th> element.

Basic table

A basic table with default styling.

In this example we have a simple table with some headings and data cells. We use some classes to highlight and align the table contents.

Item	Description	Price
Laptop	15-inch, 8GB RAM, 512GB SSD	€ 899.99
Smartphone	6.5-inch display, 128GB, 5G	€ 649.99

  <table><br> <tr class="Heading"><br> <th class="Item">Item</th><br> <th class="Description">Description</th><br> <th class="Price TextAlignLeft">Price</th><br> </tr><br> <tr><br> <td>Laptop</td><br> <td>15-inch, 8GB RAM, 512GB SSD</td><br> <td class="TextAlignRight">€ 899.99</td><br> </tr><br> <tr><br> <td>Smartphone</td><br> <td>6.5-inch display, 128GB, 5G</td><br> <td class="TextAlignRight">649.99</td><br> </tr><br> </table>  
  table {<br> tr.Heading {<br> background: linear-gradient(to bottom right, #e6305e -50%, #82277c 100%);<br> color: #fff;<br> <br> th.Item {<br> width: 15%;<br> min-width: 120px;<br> }<br> th.Description {<br> width: auto;<br> }<br> th.Price {<br> width: 10%;<br> min-width: 120px;<br> }<br> }<br> }  

Table Striped

With this table the lines are made using tr:nth-child(even) this gives each even row a background color. By doing this you can make the content much easier to read

City	Population	Area (sq. mi)	Country
New York	8,336,817	302.6	United States
Tokyo	13,515,271	845.4	Japan
Beijing	21,009,000	6,336.5	China
London	8,982,000	607	United Kingdom

 table {<br> tr:nth-child(even) {<br> background-color: #eee;<br> }<br> }

Table colours

Here is a example of a way to use colour inside a table. We also made a availability bar with you can change the length of by adjusting the class Stock-100

Snack	Category	Price	Availability
Potato Chips	Salty	€ 2.99	In stock In stock
Gummy Bears	Sweet	€ 2.25	In stock In stock
Chocolate	Sweet	€ 1.50	Limited stock Limited stock
Popcorn	Savory	€ 3.25	Out of stock Out of stock
Pretzels	Savory	€ 2.75	In stock In stock

  <table><br> <tr class="Header"><br> <th class="Snack">Snack</th><br> <th class="Category">Category</th><br> <th class="Price">Price</th><br> <th class="Availability">Availability</th><br> </tr><br> <tr><br> <td>Potato Chips</td><br> <td>Salty</td><br> <td>2.99</td><br> <td class="Availability"><br> <div class="LabelWrapper"><br> <div class="Label Stock-50"><span>In stock</span></div><br> <div class="Label InfoBottom Stock-50">In stock</div><br> </div><br> </td><br> </tr><br> <tr><br> <td>Gummy Bears</td><br> <td>Sweet</td><br> <td>2.25</td><br> <td class="Availability"><br> <div class="LabelWrapper"><br> <div class="Label Stock-100"><span>In stock</span></div><br> <div class="Label InfoBottom Stock-100">In stock</div><br> </div><br> </td><br> </tr><br> </table>  
  td.Availability{<br> padding: 15px ;<br> <br> div.LabelWrapper {<br> position: relative;<br> background: #f3f3f3;<br> box-shadow: inset 0px 10px 25px 6px rgba(0,0,0,0.1);<br> border-radius: 20px;<br> width: 100%;<br> height: 33px;<br> <br> div.Label {<br> border-radius: 20px;<br> background-colour:#e6305e;<br> color: #fff;<br> overflow: hidden;<br> position: absolute;<br> z-index: 1;<br> height: 33px;<br> font-weight:600;<br> <br> span {<br> position: absolute;<br> }<br> <br> &.InfoBottom {<br> color: #82277c;<br> background: transparent;<br> width: 100% !important;<br> z-index: 0;<br> display: block !important;<br> }<br> <br> svg{<br> margin: 7px 10px 0 10px;<br> float: left;<br> }<br> <br> &.Stock-100 {<br> width: 100%;<br> &:before {<br> display: none;<br> font: var(--fa-font-solid);<br> content: "\f111";<br> }<br> }<br> &.Stock-75 {<br> width: 75%;<br> &:before {<br> display: none;<br> font: var(--fa-font-regular);<br> content: "\e5d4";<br> }<br> }<br> }<br> }<br> }  

Table styling with @mixins and @includes (responsive and resizable)

Time for something really extraordinary.

Make responsive CSS styling extremely easy. Why not not mix a realtime resizable preview with responsive media queries? Yes! Now you can mix and match Realtime responsive media queries without resizing the browser.

We made this table responsive. we did this by using media queries. and if the screen is less than 600px tha layout will chane by using first-child and last-child by doing this we made the content inside the table clear to read.

Product	Category	Price	Availability
Mobile Phone	Electronics	€ 879.99	in stock
Robot lawnmower	Home & Garden	€ 999.99	in stock
Lip stick	Beauty	€ 19.99	out stock

  <br> @mixin TableProducts_XL {<br><br> div.Preview.TableProducts {<br> table {<br> background-color: green;<br> color: white;<br><br> tr {<br> <br> }<br> }<br> }<br> }<br><br> <br> @mixin TableProducts_L {<br><br> div.Preview.TableProducts {<br> table {<br> background-color: red;<br> color: black;<br><br> tr {<br> display: block;<br> }<br> }<br> }<br> }<br><br> <br> @mixin TableProducts_M {<br><br> div.Preview.TableProducts {<br> table {<br> background-color: yellow;<br> color: black;<br><br> tr {<br> display: grid;<br> }<br> }<br> }<br> }<br><br> <br> @mixin TableProducts_S {<br> <br> div.Preview.TableProducts {<br> <br> table {<br> border: 0;<br> <br> <br> tr.Header {<br> border-top: 10px solid #51a6f8;<br> transition: 0.3s ease-in-out;<br> }<br> <br> tr {<br> <br> display: block;<br> margin: 0 0 10px 0;<br> border-bottom: 0;<br> box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);<br> }<br> tr:first-child{<br> margin: 0;<br> box-shadow: none;<br> }<br> <br> th {<br> display: none;<br> }<br> <br> td {<br> border-bottom: 1px solid #ddd;<br> display: block;<br> text-align: right;<br> }<br> <br> td::before {<br> content: attr(class);<br> float: left;<br> font-weight: bold;<br> }<br> <br> td:last-child {<br> border-bottom: 0;<br> }<br> }<br> }<br> }<br>  

Table Span

Cell span <colspan=""> and row span <rowspan=""> are used to join cells together to make a larger cell. You can join cells horizontally, vertically, or both.

We used hover to make it more visible.

1	3	4
<colspan="2">		<rowspan="3">
<rowspan="2">	<rowspan="2" colspan="2">
<rowspan="2">	<rowspan="2" colspan="2">

  <table><br> <tr class="Heading"><br> <th>1</th><br> <th>2</th><br> <th>3</th><br> <th>4</th><br> <th>5</th><br> <th>6</th><br> </tr><br> <tr><br> <td colspan="2"></td><br> <td></td><br> <td colspan="3"></td><br> </tr><br> <tr><br> <td rowspan="2"></td><br> <td></td><br> <td rowspan="2" colspan="3"></td><br> <td></td><br> </tr><br> <tr><br> <td></td><br> <td></td><br> </tr><br> </table>  