首页 > 代码库 > html表格知识点总结
html表格知识点总结
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
table 中的border 值带不带单位效果是一样的
table没有border什么也没有，有border有边框，css 改变table{border: }只有外边框改变,规定围绕表格的边框的宽度
从实用角度出发，最好不要规定边框，而是使用 CSS 来添加边框样式和颜色。
colspan 属性规定单元格可横跨的列数。
rowspan 属性规定单元格可横跨的行数。
<caption> 元素定义表格标题，必须紧随 table 标签之后。只能对每个表格定义一个标题，默认居中与表格之上
tr是块状元素， td是内联元素
td与th其实实质是相同的，都是行内元素，只是th比td多了一个加粗的效果，所以我们可以认为th就是tr加粗
cellpadding 属性规定单元格(td,th)边沿与其内容之间的空白。 类似于padding 默认为1
cellspacing 属性规定单元格(td,th)之间的空间。 类似于margin 默认为2
cellpadding 与 cellspacing 只与单元格td , th有关，与table无关;
border＝“1”就相当于 table,th,td { border: 1px solid #... }; 效果是一样的
cellspacing 与 td,th的margin 无关，td,th{margin: ..} 对td,th,不起任何作用
border="1" = table,th,td{border: 1px solid #...}
cellpadding= ‘n‘ = th,td{padding:n };
cellspacing = "0" = table{border-spacing:0;}; 一般用 table{border-collapse:collapse;}
在CSS中，th, td{padding:0;}效果等同于cellpadding="0″。
cellspacing="0″等同于table {border-spacing:0;} 效果一样
cellspacing="0″类似于table {border-collapse:collapse;}
注意：只是类似。此时表格行和单元格边框是组合为单一边框 这时cellspacing 就失去了作用，因为单元格之间已经没有了距离
表格里的表格，表格里放其它的标签，来构建复杂的效果
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
<thead> 内部必须拥有 <tr> 标签！
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tr 表示一行
th 表示表头（默认样式加粗居中font-weight:bold; text-align:center;）列头单元格|行首单元格
td 表示单元格table cell
如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
默认的th中的文字是居中的，而td中的文字中不居中的，想要td中的文字居中，必须单独写 td{text-align: center;} 如果写th,td{text-align: center;}是不起作用的
table { border: 1px solid #ccc; border-collapse: collapse; //用collspae来取消cellpacing 而且使两线合一}td,th { border: 1px solid #ccc; padding: 50px; //用padding来扩大单元格 text-align: center;}td { text-align: center; //实现td中的文字居中}
一个经典表格代码
1 <html> 2 <head> 3 <title>财政报表</title> 4 <style type="text/css"> 5 <!-- 6 .datalist{ 7 border:1px solid #429fff; /* 表格边框 */ 8 font-family:Arial; 9 border-collapse:collapse; /* 边框重叠 */10 }11 .datalist tr:hover{12 background-color:#c4e4ff; /* 动态变色,IE6下无效！*/13 }14 .datalist caption{15 padding-top:3px;16 padding-bottom:2px;17 font:bold 1.1em;18 background-color:#f0f7ff;19 border:1px solid #429fff; /* 表格标题边框 */20 }21 .datalist th{22 border:1px solid #429fff; /* 行、列名称边框 */23 background-color:#d2e8ff;24 font-weight:bold;25 padding-top:4px; padding-bottom:4px;26 padding-left:10px; padding-right:10px;27 text-align:center;28 }29 .datalist td{30 border:1px solid #429fff; /* 单元格边框 */31 text-align:right;32 padding:4px;33 }34 -->35 </style>36 </head>37 <body> 38 <table class="datalist" summary="财政报表">39 <caption>财政报表 2005 - 2008</caption>40 <thead>41 <tr>42 <th> </th>43 <th scope="col">2005</th>44 <th scope="col">2006</th>45 <th scope="col">2007</th>46 <th scope="col">2008</th>47 </tr>48 </thead>49 <tbody>50 <tr>51 <th scope="row">拨款</th>52 <td>11,980</td>53 <td>12,650</td>54 <td>9,700</td>55 <td>10,600</td>56 </tr>57 <tr>58 <th scope="row">捐款</th>59 <td>4,780</td>60 <td>4,989</td>61 <td>6,700</td>62 <td>6,590</td>63 </tr>64 <tr>65 <th scope="row">投资</th>66 <td>8,000</td>67 <td>8,100</td>68 <td>8,760</td>69 <td>8,490</td>70 </tr>71 <tr>72 <th scope="row">募捐</th>73 <td>3,200</td>74 <td>3,120</td>75 <td>3,700</td>76 <td>4,210</td>77 </tr>78 </tbody>79 <tfoot>80 <tr>81 <td colspan="5">2008 年统计</td>82 </tr>83 </tfoot>84 </table>85 </body>86 </html>
html表格知识点总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。