Word เวอร์ชั่นหลังมีตัวช่วยใส่สีตารางสวยๆ สบายตา ที่สำคัญคืออ่านง่ายขึ้น จึงมีคนเลียนแบบมาใช้กับตารางในเว็บบ้าง ความจริงการใส่สีตารางสลับกัน โดยใช้ 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