Tables

Luckily enough, our lecturer gave us a website which automatically generates the html and CSS codes as we’re applying changes to the table. Take a look!: http://www.csstablegenerator.com/

css table generator

HTML Code:

<html>
<head>
<link rel=”stylesheet” href=”stylesheet.css” type=”text/css” />
</head>
<body>
<div class=”CSSTableGenerator” >
<table >
<tr>
<td>
Title 1
</td>
<td >
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td >
Row 1
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 3
</td>
<td>
Row 3
</td>
<td>
Row 3
</td>
</tr>
</table>
</div>
</body>
</html>

 

CSS Code:

.CSSTableGenerator {
margin:0px;padding:0px;
width:30%;
height:30%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;

-moz-border-radius-bottomleft:16px;
-webkit-border-bottom-left-radius:16px;
border-bottom-left-radius:16px;

-moz-border-radius-bottomright:16px;
-webkit-border-bottom-right-radius:16px;
border-bottom-right-radius:16px;

-moz-border-radius-topright:16px;
-webkit-border-top-right-radius:16px;
border-top-right-radius:16px;

-moz-border-radius-topleft:16px;
-webkit-border-top-left-radius:16px;
border-top-left-radius:16px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:16px;
-webkit-border-bottom-right-radius:16px;
border-bottom-right-radius:16px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:16px;
-webkit-border-top-left-radius:16px;
border-top-left-radius:16px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:16px;
-webkit-border-top-right-radius:16px;
border-top-right-radius:16px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:16px;
-webkit-border-bottom-left-radius:16px;
border-bottom-left-radius:16px;
}.CSSTableGenerator tr:hover td{

}
.CSSTableGenerator tr:nth-child(odd){ background-color:#59bdd1; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;

border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:11px;
font-size:15px;
font-family:Helvetica;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #1344c1 5%, #59bdd1 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1344c1), color-stop(1, #59bdd1) );
background:-moz-linear-gradient( center top, #1344c1 5%, #59bdd1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#1344c1″, endColorstr=”#59bdd1″); background: -o-linear-gradient(top,#1344c1,59bdd1);

background-color:#1344c1;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:19px;
font-family:Times New Roman;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #1344c1 5%, #59bdd1 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1344c1), color-stop(1, #59bdd1) );
background:-moz-linear-gradient( center top, #1344c1 5%, #59bdd1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#1344c1″, endColorstr=”#59bdd1″); background: -o-linear-gradient(top,#1344c1,59bdd1);

background-color:#1344c1;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

 

And that is what that will look like on a website :

table

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s