คลังเก็บบล็อก

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


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

<!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-color: #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>
Advertisements

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)


จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

  • ใช้ได้กับทุกบราวเซอร์รวมทั้งไอโฟนด้วย แต่ ie ต้องใช้ DOCTYPE เท่านั้น ถ้าเป็นตัวอื่นจะกำหนดความสูงของแถวไม่ได้
  • ถ้าเนื้อหาน้อยมากๆ ตารางจะพยามชดเชยความสูงของตัวมันเองที่มากกว่าปกติ โดยจะเพิ่มความสูงของ tr ทดแทน ถ้าไม่อยากให้หน้าเว็บดูผิดปกติให้แก้ <tr> ที่มีปัญหาเป็น<tr style=”height:20px;”>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>100% table height</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css3.css">
    <style>
    html
    {
    	height:100%;
    }
    body
    {
    	height:100%;
    	margin: 0px;
    	padding: 0px;
    	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
    }
    table
    {
    	border: 0 none;
    	height:100%;
    }
    td
    {
    	margin: 0px;
    	padding: 0px;
    	vertical-align:top;
    	height:0px;
    }
    #header
    {
    	background:#c00000;
    	height:20px;
    }
    #footer
    {
    	background:#c00000;
    	height:20px;
    }
    </style>
    </head>
    <body>
    <table border="1" class="tablewrapper">
      <tr>
        <td id="header">header</td>
      </tr>
      <tr>
        <td>contents</td>
      </tr>
      <tr>
        <td id="footer">footer</td>
      </tr>
    </table>
    </body>
    </html>
    

    นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
    ดูเพิ่มเติม

%d bloggers like this: