สลับสีตารางเหมือน world

Byphunsanit

สลับสีตารางเหมือน world

สลับสีตาราง worldWord เวอร์ชั่นหลังมีตัวช่วยใส่สีตารางสวยๆ สบายตา ที่สำคัญคืออ่านง่ายขึ้น จึงมีคนเลียนแบบมาใช้กับตารางในเว็บบ้าง ความจริงการใส่สีตารางสลับกัน โดยใช้ css (:nth-child odd) มีคนเขียนไว้เยอะแล้ว แต่ตัวนี้จะพิเศษกว่าเพราะว่าด้านล่างแถวสีฟ้าอ่อน สังเกตดี ๆ จะเห็นเส้นสีขาว ซ่อนอยู่ด้วยทำให้ดูมีมิติ สวยขึ้นอีกนิด เหมือนต้นแบบครับ (ไม่เห็นบนไออีแก่ๆ เก่าเก็บ อีกตามเคย) โหลดตัวอย่างได้ที่นี่

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cool table</title>
<style>
table.plus {
    background: #7ba0cd;
    border-collapse: collapse;
    border-left: solid 1px #7ba0cd;
    border-right: solid 1px #7ba0cd;
    font-family: "Calibri", "sans-serif";
    font-size: 11pt;
    width: 100%;
}
table.plus tr {
    background: #FFFFFF;
    border-bottom: solid 1px #7ba0cd;
}
table.plus thead tr {
    background-color: #4e80bc;
    color: white;
}
table.plus tbody tr:nth-of-type(odd) {
    background: #d2deed;
    border-bottom: solid 1px #FFFFFF;
    box-shadow: 0 2px 0 -1px #7ba0cd;
}
table.plus tbody tr.case,
table.plus tfoot tr {
    background: #d7d7d7;
}
</style>
</head>
 
<body>
<form action="username" method="post">
  <table class="plus">
  <caption>
  User Register
  </caption>
  <thead>
    <tr>
      <th width="30">No.</th>
      <td width="100">required</td>
      <td width="100">name</td>
      <td width="100">value</td>
      <td>sample</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>yes</td>
      <td><label for="username">username</label></td>
      <td><input type="text" name="username" /></td>
      <td></td>
    </tr>
    <tr>
      <th>2</th>
      <td>yes</td>
      <td><label for="text">password</label></td>
      <td><input type="password" name="password" /></td>
      <td></td>
    </tr>
    <tr>
      <th>3</th>
      <td>yes</td>
      <td><label for="passwordCon">passwordCon</label></td>
      <td><input type="password" name="passwordCon" /></td>
      <td></td>
    </tr>
    <tr>
      <th>4</th>
      <td>yes</td>
      <td><label for="email">email</label></td>
      <td><input type="text" name=email" /></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><label for="profiler">profiler Your Application</label>
        <input type="checkbox" name="profiler" value="1" checked />
        <input type="submit" value="call" /></td>
      <td></td>
    </tr>
  </tfoot>
  </table>
</form>
</body>
</html>

About the author

phunsanit administrator

Leave a Reply