HOW TO DESIGN TABLES USING HTML AND CSS
hello and welcome back, in this tutorial we will speak about Tables.
we all know that tables are a very good way to represent and summerise data but is it really necessary to design it, of course it is, the more your tables are good to look and well designed the more the data visibility is great.
like every tutorial i will give you the full code but i will explain some tips and some mistakes that we have to avoid.
HOW TO CREATE TABLE IN HTML
making table is easy all what we will need is the <table> tag.
we know that every table contains rows and columns.
rows are the horizontal elements and columns are the vertical elements. In HTML every row contains columns, to make this simple i will give you an example.
imagine that you want to make a table that contains the salary of your employees. the table structure will be like this.
the first row will contain the data that we will represent ( eg: id, name, email ...) and the other row will contain the set of person. to create this on HTML we will create a <table> tag
inside <table> we will ad <tr> ( <tr> is the row tag) and inside of every <tr> tag we will add <td> tag ( <td> is the cell tag )
and the final structure will be like this:
<table>
<tr>
<th>#</th>
<th>Nom</th>
<th>Prenom</th>
<th>identifiant </th>
<th>date de naissance </th>
<th>salaire</th>
</tr>
<tr>
<td>1</td>
<td>Jean</td>
<td>leBon</td>
<td>1368</td>
<td>18 Nov 1962</td>
<td>5000$</td>
</tr>
</table>
<tr>
<th>#</th>
<th>Nom</th>
<th>Prenom</th>
<th>identifiant </th>
<th>date de naissance </th>
<th>salaire</th>
</tr>
<tr>
<td>1</td>
<td>Jean</td>
<td>leBon</td>
<td>1368</td>
<td>18 Nov 1962</td>
<td>5000$</td>
</tr>
</table>
as you can see I added a special tag inside the <tr> tag and it's <th> tag, this tag represents the table head tag it's important for the search engine to know about the head of the table.
and that's it for the HTML part, now it's time for you to get the source code
Video Tutorial
HTML CODE :
<!DOCTYPE html> <html> <head> <title>Table layout</title> <link rel="stylesheet" href="style/main.css"> </head> <body> <div class="filter"> </div> <table > <tr> <th>#</th> <th>Nom</th> <th>Prenom</th> <th>identifiant </th> <th>date de naissance </th> <th>salaire</th> </tr> <tr> <td>1</td> <td>Jean</td> <td>leBon</td> <td>1368</td> <td>18 Nov 1962</td> <td>5000$</td> </tr> <tr> <td>2</td> <td>jack</td> <td>Duppont</td> <td>1368</td> <td>18 Dec 1962</td> <td>2000$</td> </tr> <tr> <td>3</td> <td>Jean</td> <td>leBon</td> <td>1368</td> <td>18 Nov 1972</td> <td>4200$</td> </tr> <tr> <td>4</td> <td>Nadia</td> <td>leBon</td> <td>1368</td> <td>18 Mar 1982</td> <td>6300$</td> </tr> <tr> <td>5</td> <td>Nadia</td> <td>leBon</td> <td>1368</td> <td>18 Mar 1982</td> <td>6300$</td> </tr> <tr> <td>6</td> <td>Nadia</td> <td>leBon</td> <td>1368</td> <td>18 Mar 1982</td> <td>6300$</td> </tr> <tr> <td>7</td> <td>Nadia</td> <td>leBon</td> <td>1368</td> <td>18 Mar 1982</td> <td>6300$</td> </tr> <tr> <td>8</td> <td>Nadia</td> <td>leBon</td> <td>1368</td> <td>18 Mar 1982</td> <td>6300$</td> </tr> </table> </body> </html>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto');
*{
margin:0;
padding: 0;
outline: 0;
}
.filter{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgb(233,76,161);
background: -moz-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
background: linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e94ca1",endColorstr="#c74ae9",GradientType=1);
opacity: .7;
}
table{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
border-collapse: collapse;
border-spacing: 0;
box-shadow: 0 2px 15px rgba(64,64,64,.7);
border-radius: 12px 12px 0 0;
overflow: hidden;
}
td , th{
padding: 15px 20px;
text-align: center;
}
th{
background-color: #ba68c8;
color: #fafafa;
font-family: 'Open Sans',Sans-serif;
font-weight: 200;
text-transform: uppercase;
}
tr{
width: 100%;
background-color: #fafafa;
font-family: 'Montserrat', sans-serif;
}
tr:nth-child(even){
background-color: #eeeeee;
}
*{
margin:0;
padding: 0;
outline: 0;
}
.filter{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgb(233,76,161);
background: -moz-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
background: linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(199,74,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e94ca1",endColorstr="#c74ae9",GradientType=1);
opacity: .7;
}
table{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
border-collapse: collapse;
border-spacing: 0;
box-shadow: 0 2px 15px rgba(64,64,64,.7);
border-radius: 12px 12px 0 0;
overflow: hidden;
}
td , th{
padding: 15px 20px;
text-align: center;
}
th{
background-color: #ba68c8;
color: #fafafa;
font-family: 'Open Sans',Sans-serif;
font-weight: 200;
text-transform: uppercase;
}
tr{
width: 100%;
background-color: #fafafa;
font-family: 'Montserrat', sans-serif;
}
tr:nth-child(even){
background-color: #eeeeee;
}
Thank you for reading the post, if you had any problem just post a comment and tell us what is the problem and we will help you
HOW TO DESIGN TABLES USING HTML AND CSS
Reviewed by Medics
on
March 08, 2019
Rating:
Reviewed by Medics
on
March 08, 2019
Rating:
No comments: