├── a.jpg ├── index.html ├── style.css ├── transition.css └── transition.html /a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadEssa-514/Simple-Table/52b2b8bac865e45b1033543bf2235582bb8a1b12/a.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | table design 9 | 10 | 11 |
12 |

table design through css


13 |
14 | 16 | 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 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
17 |
NameFather NameMobile NumberEmail
AlamAhmad0315121472Alam514@gmail.com
BadarBaber0315121724Baber514@gmail.com
catapayacaddis0315121879Catapaya514@gmail.com
Dindongdadamadam03151372678Dindong514@gmail.com
Muhammad EssaMusa Ali03157687326Essa514@gmail.com
Fahadfayax03143455632Fayad514@gmail.com
GareebGulam03177487629Gareeb514@gmail.com
HussainHassan0315121472Hussain514@gmail.com
IsrarIstiyaq03134243472Israr514@gmail.com
95 |
96 |
97 | 98 | 99 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0%; 3 | 4 | } 5 | #main{ 6 | margin-top: 05%; 7 | margin-left: 32%; 8 | 9 | } 10 | .heading{ 11 | color: blue; 12 | cursor: pointer; 13 | margin-left: 20vh; 14 | 15 | } 16 | .table{ 17 | background-color:red; 18 | width: 60%; 19 | } 20 | .table td{ 21 | 22 | color: red; 23 | background-color: wheat; 24 | padding: 15px; 25 | 26 | } 27 | 28 | h1{ 29 | font-size: 10vh; 30 | margin-right: 50%; 31 | } 32 | 33 | .table td:hover{ 34 | color: red; 35 | background-color: black; 36 | border: 2px; 37 | border-radius: 100px; 38 | transition-delay: 1; 39 | transition-duration: 2; 40 | 41 | } 42 | button{ 43 | margin-top: 3%; 44 | margin-left: 32%; 45 | font-size: 30px; 46 | width: 41%; 47 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 48 | background-color: gray; 49 | 50 | 51 | } 52 | button:hover{ 53 | color: white; 54 | background-color:black; 55 | border-radius: 100vh; 56 | color:blue ; 57 | background-color: red; 58 | transition: all 1s; 59 | 60 | 61 | } -------------------------------------------------------------------------------- /transition.css: -------------------------------------------------------------------------------- 1 | 2 | .new{height: 100px; 3 | width: 100vh; 4 | 5 | margin-left: auto; 6 | margin-right: auto; 7 | 8 | } 9 | .new ul{ 10 | display: flex ; 11 | } 12 | .new ul li{ 13 | list-style: none; 14 | padding: 30px; 15 | background-color: rgb(67, 65, 65); 16 | font-weight: bolder; 17 | color: white; 18 | width: 150px; 19 | 20 | } 21 | .new ul .active{ 22 | background-color: green; 23 | 24 | } 25 | .new ul li:hover{ 26 | background-color: black; 27 | } 28 | -------------------------------------------------------------------------------- /transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 |
14 | 21 |
22 |
23 | 24 | 25 | 26 | --------------------------------------------------------------------------------