How to apply design in table? - ixdzone.com

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 −