前端07班 王
对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格！其实这只是针对使用HTML表格 来定义网页的布局，表格在方便的排列数据信息行和列方面还是非常完美。
下面我们就一起来学习一下table吧：
对于表格，我们现在已经不推荐使用它的一些自带属性，因为现在我们都在强调要保证结构与样式的分离，所以将想要定义的样式都放到css文件中吧。
table的10个相关标签<table> 定义表格<caption> 定义表格标题<col> 为表格的列定义属性<colgroup> 定义表格列的分组<thead> 定义表格的表头<th>定义表格的表头<tr> 定义表格的行<tfoot> 定义表格的表注(底部)<tbody> 定义表格主体<td> 定义一个单元格
基本的表格结构:标题、头部、主体和底部
对于表格我们最熟悉的就是table , tr , th , td , thead ,tbody ,tfoot 这几个标签了，对于col , colground 这两个标签很多人都忽视了，也许有的人根本就不知道，但其实这两个标签作用很大。下面我们就一起来看看这两个标签的用法吧。<colgroup>此标签用于对表格中的列进行组合使用 span属性可以指定 colgroup定义的表格列数，该属性的缺省值为 1。所有主流浏览器都支持 colgroup 标签，colgroup 标签只能在 table 元素中使用，colgroup中定义的style颜色属性是会被td中重新定义的颜色覆盖。这时style样式不再是高优先级了。
通过测试发现colgroup中除的background-color,width这两个常用的属性设置值是起作用的，其他一些属性如：color , font-size , font-weight ，给这些属性设置值是不起作用的。所以我们要很好地把这两个属性利用起来。
下面我们来结合图片、代码及文字说明来看看 这个标签的使用：
（一）、如图示，下面表格的每一列的背景色与宽度是不一样的
下面看具体的html代码：
<table class="colgroup_data">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
我们看到上面定义了4个colgroup标签，他们分别对应下面的每一列，里面分别定义了一个类名，下面看一下css样式的定义：
.colgroup_data .one_col { background:#f2eada; text-align: center; }
.colgroup_data .two_col { background:#C7E291; text-align: center; font-weight:700; }
.colgroup_data .three_col { background: #fff287; text-align: center; }
.colgroup_data .four_col { color: #0051e6!important; background: #FFBFBF; text-align: center; }
四种样式分别定义了四种背景色。当然我们也可以为每列定义宽度，上面的代码中我们看到第四行，我们给color添加了imgportant，以增加他的优先级，但实际上我们在页面中看到的却不是设定的颜色，而是td单元格中定义的属性。（二）、结合js进行隔行变色，这样不仅列的颜色可以不一样，行的颜色也可以不一样，这样我们就可以制作出一个单元格背景色多变的多样化表格
下面看具体的html代码：
<table class="colgroup_span">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
我们看到上面一段代码只定义了两个colgroup标签，第一个colgroup标签对应第一列，第二个colgroup标签对应第二、三二列，这是因为在第二个colgroup标签里面定义了span属性，值为2。当span属性不写值时，它会被默认为1。上面我们定义了两个colgroup标签，总共对应了下面的三列，但是表格有四列，则剩下的就是没有定义的，它会继承表格默认的样式。下面我们来看上面表格中的css样式定义：
.colgroup_span .one_col { background:#f2eada; text-align: center; }
.colgroup_span .two_col { background:#fff287; text-align: center; }
分别定义了第一列为很浅红，第二列、第三列为淡黄色，剩下的则是没有定义的，默认为白色。但我们现在看到的表格的颜色不是纯粹的上面定义的两列的颜色，这是因为我们添加了一段js,给表格的偶数行添加了青色背景。这时我们会发现我们列定义的背景颜色被行定义的样式覆盖了，这不是因为js添加的行的样式写大下面，优先级比较高的原因，而是因为colgroup中定义的属性值会被td单元格中定义的属性值覆盖，除非td单元格不定义样式，则会以colgroup标签中的样式为准。
我们上面写到虽然给colgroup定义了颜色属性，但却没有达到预期的效果。通过多次测试，发现colgroup标签只有background-color、width这两个属性是起作用的。其他的属性，如：font-size、font-weight、color等属性，给他们设值是不起作用的，td单元格依旧以他们自己的默认属性值为标准，如果td单元格没有设置样式，它们则会继承td单元格父级的样式，也不会用colgroup标签中设置的属性值。（注：通过测试发现大IE6及IE7下面colgroup中设置的一系列属性值是有作用的，但鉴于浏览器的兼容性，所以除了background-color、width这两个属性可以使用外，其他属性不建议使用）如果哪位高手知道colgroup中在不同浏览器下均可使用的属性欢迎补充。
此元素是块元素,它不需要关闭标签。
col元素可嵌套于 colgroup元素内。这时嵌套的 col 属性将覆盖 colgroup属性。col和 colgroup元素可用于类似的目的。如果我们在 colgroup中嵌套了col元素，则应该避免在 colgroup中再使用 span标签属性。因为嵌套的 col中的 span属性将覆盖 colgroup中的标签属性。如果两个都定义span标签属性也容易引起代码的混乱意想不到的结果。
下面我们来看几种col标签的使用情况：
（一）、col标签控制列的宽度及背景色
具体html代码：
<table class="colgroup_col">
<col align="right" />
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
这段代码是不是很熟悉，就是上面的学习colgroup标签时的代码，只是这里将colgroup标签换成了col标签，然后根据里面定义的类名对这个表格的每个列的背景及宽度进行定义。
css样式代码：
.colgroup_col .one_col { background:#f2eada; text-align: center; }
.colgroup_col .two_col { width:250px; background:#C7E291; text-align: center; }
.colgroup_col .three_col { background:#fff287; text-align: center; }
.colgroup_col .four_col { color: #ffd400; background: #FFBFBF; text-align: center; }
上面四行css样式分别定义 了每一列的背景及宽度。这里发现一个有趣的现象，正常我们写了什么结构，在页面下查看源码的时候，也应该看到什么样的结构
通常情况下我们会认为我们应该看到如上图一样的表格结构，但通过在不同浏览器下测试发现（目前只测试了火狐与chrome两个浏览器），在相同内核浏览器下随着浏览器版本的升级，它们对col与colgroup标签有了不同的解析，我们看一下下面的截图：
浏览器经过解析给col标签自动添加了父级标签colgroup，通过看上面两张图的比较，我们可以对colgroup和col有更好地理解了，col与colgroup都是定义列的标签元素，但colgroup标签还可以定义列的组，它可以单独使用，也可以结合col标签一起使用。通过上面在高版本浏览器下的测试的例子，说明浏览器对col标签的解析更深入贴切了，所以个人建意以后使用col标签的时候，配合colgroup标签一起使用，这样才更符合标签的语义话。
（二）、col标签结合colgroup标签的使用
具体html代码：
<table class="colgroup_col">
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>
通过上面代码我们知道，第一列为一组，剩下的三列为一组，第二组又分为三列，而第二组中的第一个col标签又定义了二、三两列的样式，第二个标签则定义了第三列的样式。
具体html代码：
<table class="col_span">
<col span="2" />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>
从上面的代码我们可以看出col可以和clogroup标签一样使用span属性来控制的列数
通过上面图片、代码及文字的说明我们可以很清楚地知道col及colgroup标签的区别及使用方法了。理解不到位的地方，欢迎大家指出与补充:）
表格强制换行（非亚洲语言文本）我们经常会遇到表格的数据太多而，将页面撑破的情况，这时就需要对表格进行控制了。下面我们一起来看如何解决表格强制换行的问题。
表格强制换行，有一个必须的条件就是经要表格定义宽度。一定是表格本身的宽度，而不是td单元格的宽度。
我们依旧图片、代码及文字说明相结合来学习这个问题的解决方法：
我们将单词之间的空格去掉了，变成一个单词，我们可以看到一个单词之间断开换行了。下面我们 来研究一下代码。
具体html代码：
<table class="wordWrap_table">
<tbody>
<tr>
<td class="wrap_td">Innovationhasnolimits.Theonlylimitisyourimagination!!!!!!!!!!!!!!!!!!!</td>
</tr>
</tbody>
</table>
我们为表格添加了一个类名，为td也添加了一个类名
具体css代码：
.wordWrap_table{ width:200px; table-layout:fixed; word-wrap:break-word; }
.wrap_td{ padding:10px; font-size:16px; border:1px solid #ddd; }
首先为表格定义宽度，然后table-layout:fixed;它指示表格不要试图自己计算表格宽度，而是按照HTML中定义的宽度来显示。当table- layout:fixed和word-wrap:break-word同时指定时，针对连续符号的断字才会正确发生。缺少table-layout:fixed，断字不会发生，表格仍被撑大。缺少word-wrap:break-word，则表格不会被撑大，但断字不会发生,超过显示区域的内容将被hide。固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。看到一些例子，里面添加了word-break:break-all;这个控制属性，虽然这样也能强制换行，但在不同浏览器下会有一些小小的差别。
这种情况是大火狐，Opera浏览器下出现的情况
IE6 、IE7、IE8、Chrome等浏览器下出现的情况，通过比较我们发现一个细微的差别。就是第一行一个是单词换行了，另一个是单词断了换行word-break:break-all; 的解释：如table宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了长，但这个理论通过上面两张图片的比较，知道火狐与Opera是不适用的，如果是对各个主流浏览器要求比较高的情况下，建议不要加word-break:break-all;。通过上面的表格强制换行的情况，对div中出现的强制换行我们也作一个相应的扩充邮箱地址换行我们建站时经常会遇到大侧边栏添加邮箱地址的情况，但经常会遇到邮箱地址太长的情况，以前的解决方法就是大邮箱地址长度确定的情况下，改变字体大小，或者 添加强制换行符，但其实这些可扩展性不强，遇到不同长度邮箱地址的时候不能随机应变。下面我们就来看一个例子
具体html代码：
<ul class="aside_contact">
<li><span>Email:</span><a href="#">hair@rubbermachinesupplier.com</a></li>
<li><span>Address:</span>Menlo Park</li>
</ul>
具体css代码：
.aside_contact{ width:180px; padding:10px; }
.aside_contact li{ padding:5px 0; overflow:hidden;}
.aside_contact li span{ float:left; width:50px;}
.aside_contact li a{ float:left; width:110px; word-wrap:break-word;}
强制换行都是在宽度定的情况结合table-layout及word-wrap才达到完美的强制换行的效果的。
