Skip to content

Commit 283aa08

Browse files
DharshanD44DharshanD44
committed
Applying styles for Tables using css
1 parent b9ada61 commit 283aa08

File tree

1 file changed

+128
-0
lines changed

1 file changed

+128
-0
lines changed

‎table-styles.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title></title>
7+
<style type="text/css">
8+
.main
9+
{
10+
margin-left: 28em;
11+
}
12+
.sticky {
13+
position: -webkit-sticky;
14+
position: sticky;
15+
top: 0;
16+
background-color: blue;
17+
border: 2px solid #4CAF50;
18+
text-align: center;
19+
}
20+
.tab th, td {
21+
text-align: center;
22+
height: 50px;
23+
vertical-align: bottom;
24+
border: 1px solid;
25+
}
26+
.tab1 table th,td{
27+
border-collapse: collapse;
28+
padding: 60px;
29+
}
30+
.tab2 table{
31+
border: 1px solid;
32+
}
33+
.tab3 th,td
34+
{
35+
border-bottom: 1px solid black;
36+
}
37+
tr:hover {background-color: coral;}
38+
39+
</style>
40+
</head>
41+
<body>
42+
<div class="sticky">
43+
<h1>Applying Styles for Tables using CSS styles</h1>
44+
</div>
45+
<div class="main" style="overflow-x: auto;"> <div class="tab">
46+
<table>
47+
<tr>
48+
<th>Student name</th>
49+
<th>Regno</th>
50+
<th>Mobileno</th>
51+
</tr>
52+
<tr>
53+
<td>Thalapathy</td>
54+
<td>21CS01</td>
55+
<td>9078563422</td>
56+
</tr>
57+
<tr>
58+
<td>Ajith</td>
59+
<td>21CS02</td>
60+
<td>9078567854</td>
61+
</tr>
62+
</table>
63+
</div>
64+
<div class="tab1">
65+
<table>
66+
<tr>
67+
<th>Student name</th>
68+
<th>Regno</th>
69+
<th>Mobileno</th>
70+
</tr>
71+
<tr>
72+
<td>Thalapathy</td>
73+
<td>21CS01</td>
74+
<td>9078563422</td>
75+
</tr>
76+
<tr>
77+
<td>Ajith</td>
78+
<td>21CS02</td>
79+
<td>9078567854</td>
80+
</tr>
81+
</table>
82+
<br>
83+
<br> </div>
84+
<div class="tab2">
85+
<table>
86+
<tr>
87+
<th>Student name</th>
88+
<th>Regno</th>
89+
<th>Mobileno</th>
90+
</tr>
91+
<tr>
92+
<td>Thalapathy</td>
93+
<td>21CS01</td>
94+
<td>9078563422</td>
95+
</tr>
96+
<tr>
97+
<td>Ajith</td>
98+
<td>21CS02</td>
99+
<td>9078567854</td>
100+
</tr>
101+
</table>
102+
</div>
103+
<div class="tab3">
104+
<table>
105+
<tr>
106+
<th>Student name</th>
107+
<th>Regno</th>
108+
<th>Mobileno</th>
109+
</tr>
110+
<tr>
111+
<td>Thalapathy</td>
112+
<td>21CS01</td>
113+
<td>9078563422</td>
114+
</tr>
115+
<tr>
116+
<td>Ajith</td>
117+
<td>21CS02</td>
118+
<td>9078567854</td>
119+
</tr>
120+
</table>
121+
</div>
122+
</div>
123+
<script >
124+
let a=3
125+
console.log(a)
126+
</script>
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)