1<body>
2 <table>
3 <tr>
4 <th>İsim</th>
5 <th>Soyisim</th>
6 <th>E-posta</th>
7 <th>Durum</th>
8 </tr>
9 <tr>
10 <td>Devrim</td>
11 <td>Demir</td>
12 <td>devrim1demir@gmail.com</td>
13 <td>
14 <button class="butonlar">KAPALI</button>
15 </td>
16 </tr>
17 <tr>
18 <td>Enes</td>
19 <td>Pehlivan</td>
20 <td>enesphlvn@gmail.com</td>
21 <td>
22 <button class="butonlar">KAPALI</button>
23 </td>
24 </tr>
25 <tr>
26 <td>Osman</td>
27 <td>Gültekin</td>
28 <td>osmangul@gmail.com</td>
29 <td>
30 <button class="butonlar">KAPALI</button>
31 </td>
32 </tr>
33 <tr>
34 <td>Mansur</td>
35 <td>Lavaş</td>
36 <td>mansurlavas@gmail.com</td>
37 <td>
38 <button class="butonlar">KAPALI</button>
39 </td>
40 </tr>
41 </table>
42
43<script src="jquery-3.5.1.min.js"></script>
44<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
45</body>
46
47
48
49
50//css
51*{
52 font-family:sans-serif;
53 background:#f3f2ef;
54}
55table{
56 margin:200px auto;
57 text-align:center;
58 background:#fff;
59 border:4px solid dodgerblue;
60 padding:2px;
61}
62th, td{
63 border:2px solid dodgerblue;
64 background:#fff;
65 cursor:default;
66 padding:3px;
67}
68.butonlar{
69 cursor:pointer;
70 background:red;
71 color:white;
72 text-align:center;
73 outline:none;
74 border:none;
75 padding:10px 20px;
76 font-weight:bolder;
77 border-radius:4px;
78}
79
80
81
82////script
83$(".butonlar").click(function(){
84 $(this).html("AKTİF");
85 $(this).css({
86 "background-color":"green"
87 });
88})
1<table>
2 <thead>
3 <tr>
4 <th>Name</th>
5 <th>First Name</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td>Doe</td>
11 <td>John</td>
12 </tr>
13 <tr>
14 <td>Doe</td>
15 <td>Jane</td>
16 </tr>
17 </tbody>
18</table>