HTML Tables is quickly creating tables in your post. This code needed for a table using the HTML Table Generator. This HTML Code lets you choose from a variety of sizes and lets you customize the table's layout and visual appearance with a standard selection of color and display options. This Code is designed for speed and efficiency, so I tried to include essential options to allow you to put a table as quickly as possible.
What is a Table in HTML?
A table is a representation of data arranged in rows and columns. Really, it's more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells.
The use of tables in the web has become more popular recently because of the amazing HTML table tags that make it easier to create and design them.
To create a table in HTML you will need to use tags. The most important one is the <table> tag which is the main container of the table. It shows where the table will begin and where it ends.
Common HTML Table tags
- <tr> - represents rows
- <td> - used to create data cells
- <th> - used to add table headings
- <caption> - used to insert captions
- <thead> - adds a separate header to the table
- <tbody> - shows the main body of the table
- <tfoot> - creates a separate footer for the table
Now that you have an understanding of what an HTML table is all about and how you can create it, let's go ahead and see how we can make use of these tags to create tables with more features.
HTML
<div class="container">
<h1>Responsive Table</h1>
<table class="rwd-table">
<tbody>
<tr>
<th>Supplier Code</th>
<th>Supplier Name</th>
<th>Invoice Number</th>
<th>Invoice Date</th>
<th>Due Date</th>
<th>Net Amount</th>
</tr>
<tr>
<td data-th="Supplier Code">
UPS5005
</td>
<td data-th="Supplier Name">
UPS
</td>
<td data-th="Invoice Number">
ASDF19218
</td>
<td data-th="Invoice Date">
06/25/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$8,322.12
</td>
</tr>
<tr>
<td data-th="Supplier Code">
UPS3449
</td>
<td data-th="Supplier Name">
UPS South Inc.
</td>
<td data-th="Invoice Number">
ASDF29301
</td>
<td data-th="Invoice Date">
6/24/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$3,255.49
</td>
</tr>
<tr>
<td data-th="Supplier Code">
BOX5599
</td>
<td data-th="Supplier Name">
BOX Pro West
</td>
<td data-th="Invoice Number">
ASDF43000
</td>
<td data-th="Invoice Date">
6/27/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$45,255.49
</td>
</tr>
<tr>
<td data-th="Supplier Code">
PAN9999
</td>
<td data-th="Supplier Name">
Pan Providers and Co.
</td>
<td data-th="Invoice Number">
ASDF33433
</td>
<td data-th="Invoice Date">
6/29/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$12,335.69
</td>
</tr>
</tbody>
</table>
</div>
CSS
@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';
* {font-family: 'Open Sans', sans-serif;}
.rwd-table {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}
.rwd-table tr:first-child {
border-top: none;
background: #428bca;
color: #fff;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
margin-top: .5em;
}
.rwd-table td:last-child {
margin-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: inline-block;
color: #000;
}
.rwd-table th,
.rwd-table td {
text-align: left;
}
.rwd-table {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #bfbfbf;
}
.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.rwd-table tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.rwd-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.rwd-table td:before {
display: none;
}
.rwd-table th,
.rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
/* THE END OF THE IMPORTANT STUFF */
/* Basic Styling */
body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);
}
h1 {
text-align: center;
font-size: 2.4em;
color: #f2f2f2;
}
.container {
display: block;
text-align: center;
}
h3 {
display: inline-block;
position: relative;
text-align: center;
font-size: 1.5em;
color: #cecece;
}
h3:before {
content: "\25C0";
position: absolute;
left: -50px;
-webkit-animation: leftRight 2s linear infinite;
animation: leftRight 2s linear infinite;
}
h3:after {
content: "\25b6";
position: absolute;
right: -50px;
-webkit-animation: leftRight 2s linear infinite reverse;
animation: leftRight 2s linear infinite reverse;
}
@-webkit-keyframes leftRight {
0% { -webkit-transform: translateX(0)}
25% { -webkit-transform: translateX(-10px)}
75% { -webkit-transform: translateX(10px)}
100% { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
0% { transform: translateX(0)}
25% { transform: translateX(-10px)}
75% { transform: translateX(10px)}
100% { transform: translateX(0)}
}
Out Put:-
