August 13, 2015
MVC模式之下，主導View視覺的設計師，必須顧慮到 Control 工程師較容易改寫 table tr 寬度時，以 CSS 控制寬度 tr 是一個辦法，但是負責 Control 卻是越界去調整 CSS 設定，便達不到 MVC 理想境界了。
與 Control 工程師討論之下，採用 colgroup的方式，切割出 tr 的寬度，就能讓工程師安心的在html中改寫寬度，不需要彙整兩端的人員去修改網頁程式了。
以下常試著使用
1.table col 控制寬度
2.CSS class='a' 控制背景顏色
3.CSS class='a' 控制寬度與背景顏色
CSS, table, colgroup
style中指定
table, th, tr, td border 1px
th 背景與文字顏色
col class="a" 的背景, 居中設定
col class="b" 的寬度, 背景設定
colgroup中指定
col 列數量=1, 寬度100px（第一列）
col 列數量=1, col class="b" （第二列）
col 列數量=1, （第三列）
Source
參考：
http://blog.apao.idv.tw/html5/col/colgroup.php
與 Control 工程師討論之下，採用 colgroup的方式，切割出 tr 的寬度，就能讓工程師安心的在html中改寫寬度，不需要彙整兩端的人員去修改網頁程式了。
以下常試著使用
1.table col 控制寬度
2.CSS class='a' 控制背景顏色
3.CSS class='a' 控制寬度與背景顏色
CSS, table, colgroup
style中指定
table, th, tr, td border 1px
th 背景與文字顏色
col class="a" 的背景, 居中設定
col class="b" 的寬度, 背景設定
colgroup中指定
col 列數量=1, 寬度100px（第一列）
col 列數量=1, col class="b" （第二列）
col 列數量=1, （第三列）
Source
<html>
<head>
<meta charset="utf-8">
<title>html table colgroup</title>
<style type="text/css">
table, th, td, tr{border:rgba(0,0,0,1.00) solid 1px; border-collapse:collapse; }
th{ background:rgba(0,0,0,0.8); color:rgba(255,255,255,1.00);}
.a{background:rgba(142,103,223,1.00); text-align:center;}
.b{width:150px;background:rgba(255,228,114,1.00);}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col span="1" width="100"></col>
<col span="1" class="b"></col>
<col span="1" style="background:rgba(255,71,74,1.00);"></col>
</colgroup>
<tbody>
<tr>
<th class="a">title01</th>
<th>title02</th>
<th>title03</th>
</tr>
<tr>
<td class="a">01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td class="a">04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td class="a">07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<meta charset="utf-8">
<title>html table colgroup</title>
<style type="text/css">
table, th, td, tr{border:rgba(0,0,0,1.00) solid 1px; border-collapse:collapse; }
th{ background:rgba(0,0,0,0.8); color:rgba(255,255,255,1.00);}
.a{background:rgba(142,103,223,1.00); text-align:center;}
.b{width:150px;background:rgba(255,228,114,1.00);}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col span="1" width="100"></col>
<col span="1" class="b"></col>
<col span="1" style="background:rgba(255,71,74,1.00);"></col>
</colgroup>
<tbody>
<tr>
<th class="a">title01</th>
<th>title02</th>
<th>title03</th>
</tr>
<tr>
<td class="a">01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td class="a">04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td class="a">07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</body>
</html>
參考：
http://blog.apao.idv.tw/html5/col/colgroup.php
Google Web Fonts
Table中 col 應用
0 Comment(s)
