HTML_PRACTICE/tablecss.html at master · imnaresh96/HTML_PRACTICE · GitHub

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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        h1{
            color: coral;
            background-color:rgba(24, 22, 22, 0.76);
            text-align: center;
        }
         table,th,td{
            border: 1px solid black;
            text-align: center;
            ;
            /* align-items: center; */
            /* justify-content: center; */
        }
        table{
            width: 100%;
        }
        th{
            background-color: aqua;
            font-weight: bolder;
            font-size:19px ;
            padding: 10px;
            width: 30%;
        }
        td{

            color: black;
            padding: 10px;
            /* width:50%; */
        }
        tr:nth-child(even) {
            background-color:#D6EEEE;
        }
    </style>
</head>
<body>
    <h1>AI Basic Table</h1>
    <table>
        <caption>Try To Create A Valid </caption>
        <colgroup>
            <col span="2" style="background-color: yellow;">
        </colgroup>
        <tr>
            <th>Sr No.</th>
            <th>Name</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Naresh</td>
            <td>Pratap bazar rani</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
    </table>
    <!-- <table>
        <tr>
            <th>Id</th>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <th>Name</th>
            <td>Naresh</td>
            <td>Suresh</td>
        </tr>
        <tr>
            <th>Address</th>
            <td>Pali</td>
            <td>Rani</td>
        </tr>
    </table>
    <table>
        <tr>
            <th>Sr No.</th>
            <th colspan="2">Name</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">Naresh</td>
            <td>Pratap bazar rani</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Suresh</td>
            <td>Ahmedabad</td>
        </tr>
    </table> -->
</body>
</html>