<table > 标签定义 html 表格. 简单的 HTML 表格由 table 元素以及一个或多个 tr,th 或 td 元素组成. 本文就来为大家介绍一下 HTML 中表格相关的知识, 希望对大家有一定的帮助.
summary 属性: 用于概括整个表格的内容. 它对于搜索引擎的机器人记录信息十分重要.
bordercolor 属性: 用来设置表格边框的颜色. 但它在不同的浏览器下显示的效果不一致.(不推荐使用 bordercolor 属性, 而推荐使用 CSS 样式表的 border 属性来进行设置)
cellspacing 属性: 用来设置表格的单元格之间的间距.(推荐使用 CSS 样式表的 border-collapse 属性来进行设置)
- <caption>
- 标记: 表示表格的大标题, 该标记可以出现在
- < table>
- 之间的任意位置. 它对于搜索引擎的机器人记录信息十分重要.
- <th>
- 标记: 用于表示表格的行或者列的名称.
- <th>
- 标记的 scope 属性: 专门用来区分行名称和列名称. 如:
- <th scope='row'>
- 或
- <th scope='col'>
- <table>
- 里还包含:
- <thead>
- ,
- <tbody>
- ,
- <tfoot>
- 标记. 它们分别表示表格的表头, 表正文, 表脚. 在打印网页内容的时候, 如果表格很大, 一页打印不完,
- <thead>
- 和
- < tfoot>
- 将在每一页出现. (注意: 在 IE 中无效, 但在 Firefox 有效)
经典的表格代码如下:
- <HTML>
- <head>
- <title > 财政报表 </title>
- <style type="text/css">
- <!--
- .datalist{
- border:1px solid #429fff; /* 表格边框 */
- font-family:Arial;
- border-collapse:collapse; /* 边框重叠 */
- }
- .datalist tr:hover{
- background-color:#c4e4ff; /* 动态变色, IE6 下无效!*/
- }
- .datalist caption{
- padding-top:3px;
- padding-bottom:2px;
- font:bold 1.1em;
- background-color:#f0f7ff;
- border:1px solid #429fff; /* 表格标题边框 */
- }
- .datalist th{
- border:1px solid #429fff; /* 行, 列名称边框 */
- background-color:#d2e8ff;
- font-weight:bold;
- padding-top:4px; padding-bottom:4px;
- padding-left:10px; padding-right:10px;
- text-align:center;
- }
- .datalist td{
- border:1px solid #429fff; /* 单元格边框 */
- text-align:right;
- padding:4px;
- }
- -->
- </style>
- </head>
- <body>
- <table class="datalist" summary="财政报表">
- <caption > 财政报表 2005 - 2008</caption>
- <thead>
- <tr>
- <th> </th>
- <th scope="col">2005</th>
- <th scope="col">2006</th>
- <th scope="col">2007</th>
- <th scope="col">2008</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row"> 拨款 </th>
- <td>11,980</td>
- <td>12,650</td>
- <td>9,700</td>
- <td>10,600</td>
- </tr>
- <tr>
- <th scope="row"> 捐款 </th>
- <td>4,780</td>
- <td>4,989</td>
- <td>6,700</td>
- <td>6,590</td>
- </tr>
- <tr>
- <th scope="row"> 投资 </th>
- <td>8,000</td>
- <td>8,100</td>
- <td>8,760</td>
- <td>8,490</td>
- </tr>
- <tr>
- <th scope="row"> 募捐 </th>
- <td>3,200</td>
- <td>3,120</td>
- <td>3,700</td>
- <td>4,210</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="5">2008 年统计 </td>
- </tr>
- </tfoot>
- </table>
- </body>
- </HTML>
显示效果如下:
注意:
IE6 只有 < a > 标记支持: hover 伪类, 其余标签都不支持!
并且 < a > 标记的伪类有顺序: a:link -> a:visited -> a:hover -> a:active
利用 DOM 的方法和属性实现对表格的动态操作
1, 利用 DOM 动态添加一行
- <script language="javascript">
- Windows.onload=function(){
- // 插入一行
- var oTr = document.getElementById("mytable").insertRow(2);
- var aText = new Array();
- aText[0] = document.createTextNode("cell1 的内容");
- aText[1] = document.createTextNode("cell2 的内容");
- aText[2] = document.createTextNode("cell3 的内容");
- aText[3] = document.createTextNode("cell4 的内容");
- aText[4] = document.createTextNode("cell5 的内容");
- for(var i=0;i<aText.length;i++){
- var oTd = oTr.insertCell(i);
- oTd.appendChild(aText[i]);
- }
- }
- </script>
2, 利用 DOM 修改单元格内容
- <script language="javascript">
- Windows.onload=function(){
- var oTable = document.getElementById("mytable");
- // 修改单元格内容
- oTable.rows[3].cells[4].innerHTML = "更改的内容";
- }
- </script>
3, 利用 DOM 删除一个单元格或一行
- <script language="javascript">
- Windows.onload=function(){
- var oTable = document.getElementById("mytable");
- // 删除一行, 后面的行号自动补齐
- oTable.deleteRow(2);
- // 删除一个单元格, 后面的也自动补齐
- oTable.rows[2].deleteCell(1);
- }
- </script>
4, 利用 DOM 动态添加一列, 并动态删除某行
- <script language="javascript">
- function myDelete(){
- var oTable = document.getElementById("mytable");
- // 删除该行
- this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
- }
- Windows.onload=function(){
- var oTable = document.getElementById("mytable");
- var oTd;
- // 动态添加 delete 链接
- for(var i=1;i<oTable.rows.length;i++){
- oTd = oTable.rows[i].insertCell(5);
- oTd.innerHTML = "<a href='#'>delete</a>";
- oTd.firstChild.onclick = myDelete; // 添加删除事件
- }
- }
- </script>
5, 利用 DOM 动态删除某一列
- <script language="javascript">
- function deleteColumn(oTable,iNum){
- // 自定义删除列函数, 即每行删除相应单元格
- for(var i=0;i<oTable.rows.length;i++)
- oTable.rows[i].deleteCell(iNum);
- }
- Windows.onload=function(){
- var oTable = document.getElementById("mytable");
- deleteColumn(oTable,2); // 参数 2: 表示要删除的列号
- }
- </script>
本文转自: https://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html
更多 HTML 知识请关注 HTML 中文网 HTML 教程 https://www.html.cn/web/html/ 栏目.
来源: http://www.css88.com/web/html/16558.html