JavaScript之table运用

\

<table>
<caption>标题</caption>
<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
	<thead>
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
		</tr>
		<tr>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
		</tr>
		<tr>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
		</tr>
		<tr>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
			<td>aaas</td>
		</tr>
	</tbody>
</table>

创建一个表格，默认无边框。

table用于创建一个表格元素

caption  标题

thead  表头

tbody  表格主体

tr 表示表格中的一行,th和td标签要放在其中

th   标识表头单元格，默认加粗显示

td  标识单元格

跨列：在对应的th或td里添加colspan 

跨行：在对应的th或td里添加rowspan  

<th colspan="2">跨两列的单元格</th> 
......
......
......
<td rowspan="2">跨两行的单元格</td>

border ：为表格添加边框，数值代表围绕表格边框的宽度，内部边框始终为1。

frame  ： 用于绘制表格的边框，无法在Internet Explorer 中正确地显示

<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

colgroup   对表格中的列进行组合，在里面使用col对组进行细化

<colgroup span="3" valign="top"></colgroup>
<colgroup span="2" valign="bottom"></colgroup>

这里对前三列设置垂直居上，后2列垂直居下  ，其中span 表示包含多少列

然后col可以再对colgroup细分

<colgroup span="3" valign="top">
<col width="50"></col>
<col align="center"></col>
<col valign="middle"></col>
</colgroup>

 

关于表格中各列宽度问题：

定义在<table>元素上的css属性table-layout，将决定表格在布局计算时应用的算法。它有两种值，auto和fixed。在通常情况下，都使用默认值auto。

当使用auto时，表格的宽度布局与表格内部的数据有关，按比例分配宽度，如果其中某一个td定义了宽度，其他未定义的分配剩下的宽度。

固定表格布局fixed，表格的宽度和数据内容无关，并且只接受第一行的信息（其他行对宽度分配无影响），固定布局一定要给元素定义宽度，不然会自动表格布局。

两者比较，fixed布局较自动布局计算更快。

给table加上word-warp：break-word可以实现固定宽度下列内容的自动换行