How to apply design in table?

How to apply design in table?

The HTML tables allow web designer to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example

<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="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount"> $3,255.49</td>
                <td data-th="Net Amount"> $8,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>

This will produce the following result −

Supplier Code Supplier Name Invoice Number Invoice Date Due Date Net Amount
UPS5005 UPS ASDF19218 06/25/2016 12/25/2016 $8,322.12
UPS3449 UPS South Inc. ASDF29301 12/25/2016 $3,255.49 $8,255.49
BOX5599 BOX Pro West ASDF43000 6/27/2016 12/25/2016 $45,255.49
PAN9999 Pan Providers and Co. ASDF33433 6/29/2016 12/25/2016 $12,335.69

Tables Backgrounds

You can set table background using css style sheet

  • background-gcolor  − You can set background shade for complete table or just for one raw.
  • text − You can set text image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

@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 

.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 

.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;
}

This will produce the following result −

Fore responiive

Example

@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 
    show: 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 
}

body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);        
}
h1 
.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 
@-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%    
  25%   
  75%   
  100%  
}

This will produce the following result −

admin

We are the next generation digital experience agency. We are a bunch of techie cowboys from Delhi with one foot in the west bangal culture. We like to tell stories with sketches & pixels and could do the same for you. We invest our time to understand your need only because we know how to build it in the best way.

It is not a website that we build. We create an online persona for you where anyone can get in touch with you over the internet. We don’t just create a design. We present you to the world. We design with motive and sense, and we have fun along the way. Because, we really believe that you can’t make something awesome without being in love with it.

Leave a Reply

Your email address will not be published. Required fields are marked *