html table design using css - Web Development and Web Design Codes

Latest

Saturday, February 24, 2018

html table design using css

,

html table design using css

html table
html table
Hi Friends today we are going to learn about html table.in this lesson we will learn how to create html table ,table border,table cellspaing,colspan and rowspan..at the last we will learn how to design html table using css..
HTML Table: 
how to create html table ..
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
    
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Basic HTML Table ..After run this code you will get result look like below..
html table design using css
html table design using css
html table border:
Now we will add border to our html table...
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="2px">
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
    
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Your Result will be look like below:
html table design using css
html table design using css
Now it's looking ugly ...now we use table cellspacing to delete space within cells..
table cellspacing:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="2px" cellspacing="0">
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
    
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Your Result:
html table
html table
Now it's look fine..

Table colspan and rowspan:
 HTML Table colspan Example:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="2px" cellspacing="0" cellpadding="2">
   <tr>
      <th colspan="2">Name</th>
   <th colspan="2">Skill</th>
   </tr>
   <tr>
      <td>David</td>
   <td>Richard</td>
   <td>PHP</td>
   <td>Laravel</td>
   </tr>
   <tr>
      <td>Prakash</td>
   <td>Priya</td>
   <td>Java</td>
   <td>Python</td>
   </tr>
</table>

Result:
html table
html table
HTML Table rowspan Example:
HTML Table rowspan
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="1px" cellspacing="0" cellpadding="2">
   <tr>
      <th>Name</th>
   <td>Prakash Roy</td>
   </tr>
   <tr>
     <th rowspan="2">Email</th>
   <td>Prakash@gmail.com</td>
   </tr>
   <tr>
      <td>Prakash@yahoo.com</td>
   </tr>
</table>

Result:
html rowspan
html rowspan
html table design using css:
HTML Table Design Example 1:
CSS Code HTML Table design:
html table design using css
html table design using css
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
table{
 border-collapse:collapse;
 width:30%;
 }
 th,td{
   border:1px solid green;
 }
 th{
   font-size:18px;
   background:black;
   color:white;
   padding:6px;
 }
 td{
   padding:6px;
   
   font-style:italic;
 }
 tr:nth-child(odd){
     background:#009933;
  color:indigo;
  }
 tr:nth-child(even){
     background:#3399ff;
  color:white;
  }
tr:hover{
  background:#ff0000;
  color:white;
  cursor:wait;
}

Full Codes:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style>
 table{
 border-collapse:collapse;
 width:30%;
 }
 th,td{
   border:1px solid green;
 }
 th{
   font-size:18px;
   background:black;
   color:white;
   padding:6px;
 }
 td{
   padding:6px;
   
   font-style:italic;
 }
 tr:nth-child(odd){
     background:#009933;
  color:indigo;
  }
 tr:nth-child(even){
     background:#3399ff;
  color:white;
  }
tr:hover{
  background:#ff0000;
  color:white;
  cursor:wait;
} 
</style>
<table>
  <tr>
     <th>Company</th>
  <th>Founder</th>
  </tr>
  <tr>
   <td>Google Inc</td>
   <td>Larray Page</td>
 </tr>
 <tr>
   <td>Microsoft Inc</td>
   <td>Bill Gates</td>
 </tr>
 <tr>
   <td>Alibaba Inc</td>
   <td>Jack Maa</td>
 </tr>
 
</table>

HTML CSS table design Result:
html table design using css
html table design using css
HTML Table Design Example 2:
html table design using css
html table design using css

HTML Table Design :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
input[type=text]{
  padding:4px;
  border-radius:4px;
  width:50px;
 }
 input[type=submit]{
  padding:5px;
  border-radius:4px;
  background:black;
  color:white;
  cursor:pointer;
 }
 table {
    border-collapse: collapse;
    width: 40%;
}
 
th, td {
 
    padding: 8px;
}
 
tr:nth-child(even){background-color: #f2f2f2}
 
th {
    background-color: #4CAF50;
    color: white;
}
</style>
<table border="1" cellspacing="0">
  <tr>
     <th>Name</th>
  <th>Price</th>
  <th>Quantity</th>
  <th>Action</th>
  </tr>
 <tr>
    <td>ASUS VivoBook</td>
    <td>$ 500</td>
    <td><input type="text" name="quantity" value="1"/></td>
    <td><input type="submit" name="add_to_cart" value="Add To Cart"/></td>
  </tr>
  <tr>
    <td>Nokia 1020</td>
    <td>$ 600</td>
    <td><input type="text" name="quantity" value="1"/></td>
    <td><input type="submit" name="add_to_cart" value="Add To Cart"/></td>
  </tr>
</table>

That's it Friends how to create a html table and design table using css..Keep visiting ..Thank You..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article JQuery password Strength Checker Older Article php bad word filter--Get rid of Hateful Words
By v�o l�c
Labels: ,

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)