HTML的元素7

表格元素

1. col 表格中的列。为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。
2. colgroup 对表格中的若干列进行组合。
    定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。该元素只有在 <table> 中才是合法的。
    注释：colgroup 元素只能包含 col 元素。
    注释：colgroup 元素无法创建表格列。如需创建列，必须在 tr 元素内规定 td 元素。
    提示：如果需要向一个列组规定相同的属性值，请使用该元素。
    提示：如果需要为一个或多个列规定属性值，请使用 col 元素。
3. caption 表格的标题<caption> 标签必须紧随 <table> 标签之后。

caption为表格添加标题，用来制定表格的标题或者说明，是table的子元素，必须放在table中使用Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理。

语法格式：

<p>
		caption为表格添加表的名字,用来制定表格的标题或者说明，是table的子元素，必须放在table中使用
Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理	
	</p>
	<table border="1" bgcolor="#E0FFFF">
		<caption>这是表格名</caption>
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>

效果如下：

---

  caption为表格添加表的名字,用来制定表格的标题或者说明，是table的子元素，必须放在table中使用，Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理。

 
  

---

4. table 表格
5. tr 表格中的一行单元 在 HTML 5 中， 不支持 <tr> 标签的任何属性。
6. td 定义表格单元格。
    在 HTML4.01中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。 在 HTML5中，仅仅支持"colspan" 和 "rowspan" 属性。
7. th 表头：为表格添加标题行，是tr的子元素，必须放在tr标签里。语法格式：

<p>
        th元素：为表格添加标题行，是tr的子元素，必须放在tr标签里。

    </p>
    <table border="1" bgcolor="#8FBC8B">
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <p>

效果如下：

---

  th元素：为表格添加标题行，是tr的子元素，必须放在tr标签里。

标题	标题	标题
单元格	单元格	单元格
单元格	单元格	单元格

---

 <th> 标签定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
    在 HTML 4.01 中，th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性是不被赞成使用的。
    在 HTML 5 中，仅仅支持 "colspan" 、 "rowspan" 以及 "scope" 属性。
8. tbody 表格主体。
    使用<tbody>标签，可以将表格分为一个单独的<tbody> 标签可将表格中的一行或几行合成一组。 虽然您可能想包括一个，甚至会在表格中包括两个或更多个 <tbody> 标签，但是我们建议最好在表格中没有 <tbody> 标签。
    在 <tbody> 标签中，只有 tr标签可以定义表格行。并且一旦定义，一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个<tbody>跨越到另一个 <tbody> 中。
    thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上
9. thead 定义表格中的表头行。
    head、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。在 HTML 5 中，不支持 <thead> 标签的任何属性。
    注释：<thead> 内部必须拥有 <tr>标签！
    如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
10. tfoot 表格的页脚/脚注行。 

11.colspan元素：横向合并单元格，属性值为正整数

语法格式：        
 

<p>
        colspan元素：横向合并单元格，属性值为正整数，比如我把第一行的3个标题单元格弄成一个单元格，那么colspan的值就是3，colspan表示合并的单元格的数量。
 </p>
    <table border="1" bgcolor="#C0C0C0">
        <tr>
            <th colspan="3">标题</th>
            <!-- <th>标题</th>
            <th>标题</th> -->
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

效果如下：

---

---

rowspan元素：纵向合并单元格，属性值为正整数

   <p>
        rowspan元素：纵向合并单元格，属性值为正整数        
    </p>
    <table border="1" bgcolor="#5F9EA0">
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td rowspan="3">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <!-- <td>单元格</td> -->
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <!-- <td>单元格</td> -->
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

效果如下：

---

---