首页 技术 正文
技术 2022年11月11日
0 收藏 608 点赞 2,111 浏览 10045 个字

<table><table/>先定义一个表格这个就没得讲了,<caption>表示这个表格的标题

<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

例如:table常用的属性以及用法.<th></th>和<tr></tr>分别表示表头和行,其实这两个都差不多,只是th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本,让我来看两个案例就知道了:

 <html>
<body>
<table border="1">
<tr>
<th>Company</th>
<th>Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
</table>
</body>
</html>

在网页显示:aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAAA7CAIAAADuCIoeAAAFHUlEQVR4nO2dy5WcMBBFCahzcRzOwrsJZULpUBwGXjDDYSRVqfQpJOR7F3NAwFOpVLzm43ZvOwDAZGyjAwAACMGYAGA6vozpDwDAIDRjus8MAQC+eb1ecSPGBAAjMRnTCyLIDIAHZcbUzwpXgMwAeKCfWRhTBjID4AHG1ASZAfAAY2qCzAB4gDE1QWYAPLjDmN77vm0f24WPbdv3d1XAc4ExeXMUzzIFA0bcjSkorMXqDGPyRi+Y8zMv3kHZBPODMTWBMXmT9RelohYrtv8KX2NavjIwJleO+vn8/JW9aMKYFmOkMQXPno7d4gdSB7+//7zfH/FH6PWo4Orsesix9b2/ldWiIsaYXJGMSXlqGW86KyeuhLjeLL0s/Mx0HoYZk3KLdy4flnEunBV23XTdP1jeL7UlKTfeYGJMrhzz8vfzV3aKjZuC4lHKQJLqVTmg8zxjUmoifh5R1EtFbWFMrijX1HXGFMxy6f7xIeDEIsYU3LVhTAsg2UR3YwoeGkh3hdl26Miwt3KWq2ijMUm3dUrvyRu98uxhTI60VE7dFZM9mAoFKOJWYyqtodJnTOdjbIxpASzGFMyg9FCp/VaOZ0w3c/e//E4+EpJeeZzvUH68TPkqtrTU9Z1d9u1be1VhTE4ENaNMZfCWNlk/0s3aLhRh3J7U51bOjyd9V+6oiffH1lcQYwKYjccYk3TZ1ajWKDVDZgDW4zHGNCdkBsADjKkJMgPgQbExtf9K1GKQGQAPCowJAOBOMCYAmA7rrRwEkBkAD8qMqZ8VrgCZAfCg7BkTp18AmQHwAGNqgswAeIAxNUFmADzAmJogMwAeNBnTtvX5Pm0vnaTyle76SvqM3XWMsFTBKSf7ZVAe4vbeB8YQxzOq32QeKuokVtD1pS6Urq+bBhvTPdXjp5/MTMWgKiIsqgajQkcGutIMYQQx3B+Gngd7PNc9pWXpEMnLpKN6GlOXjC9mTBWdlkYozX0vunzkdImksd+bw5jBBw+yxmQMVdIxXhDFu7kb06GCMR0Lo4zJiYca03BfGB7AgR5G0Zl7jzHFIfU0ptPzAvOT2rOxVtwTJZE+LiR9e79OxqREuP1Ej9miE0ciZb5oRpR97PpB/NWdJsee1ZfiSaZUypsyUn2rccjSeLNbjeJxbHqQ+qrect3UakyBXDBV2XZjS/UMKfpBeNnlJH5XTEqEirirjuXAUmWpKoIToLHTCn1lvEpI7fPSpfItxmQUN57dUtdjjCm2zNKyM0bvYUyWOLO4GpN9dbiORUHXqascY6d9+7X3orR3GW9pGOfW+My17K8o2+M3JrbSmEr9ssKYAuLg7GBMXXSKZmQBY5LG+2hjMg6kVLnFmJKp7mBMlrAqjCmOphqMqbtOliHG1FG/wn2UTTcbk59++3wZs9ffmJIhSu3GlqS+naLTNbks9bu8Mc1gEEUfG9mpjDWlirXISr2Xnp9FebBgyUMyMEWqVDMp7mhM2zen3Ll6/k3Gmmy/Im0yDiw51FhHX1VaYv3s07dstKURSuK9dJQhVw9KCTWrvwmVY+ldab8uSPpKPpV4lMHGOvpqnB9jBqQ86P1mpbL6xv2TQws2df6unDJb+oF2Okq1w3flvPGe7qnKSedBobbT05gkB7Ubc5bZ5gZjcqVj5QzR78gjguwI/7tAE2QGwAOMqQkyA+BBsTG1/1zUYpAZAA8KjAkA4E4wJgCYjowxtf5GFABAFaIxAQDMA8YEANOBMQHAdGBMADAd/wBhlVC7nSHSbAAAAABJRU5ErkJggg==” alt=”” />,可以看出字体的粗细不一样,还有粗体比较居中一点。其中还有个<tr>属性,这个是用来定义每一行的,我们可以看到图片中总共两行,代码里就用了两个<tr>属性。

接下来讲<thead>属性,这个属性可以让你的表格变化多端,但是<thead>的一些子属性几乎没有浏览器支持,不过还是要讲一下,(1):<thead>可以与<tbody>,<tfoot>一起用,tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组,乍一看估计很多人不理解这句话的含义,其含义就是<thead>放在每个表格的第一行的表头例如可以放在第一个<tr>属性之后,<tbody>和<tfoot>则放在之后,让我们来看个例子:

<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body><table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table></body>
</html>

在网页显示:aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAABuCAIAAACsi7aFAAAEx0lEQVR4nO2aTZLcIAyFOVDfZc4xt/BulnOMHKWXOUaOQRZOeYj+QAYbJOtVKmXTmObx2ZLGdMohm0qzJxA6qSBnVUHOqoKcVf2Q20JrSyJ3090S0uv1eoGWIGdDTeRejuTAkY7cuHtlphw4EiwEuaUV5Kw6CnJWHQU5q47Gk3vnnLavtKW0pffvr+P4a0s5vwdNu1eko3LmPXM+xrnU8iXP3DH1g9xwD8dX/PpOOf/RXo4d7QMe8wSn5+YW5Oh13BsXJHePghxNbn1NIAfSydeW3vkN+h+XCLln/+jjO6XtQ5uWhDyHBynngGcF5nx44VyTuZ+zKdi/mxwXlA7D5Yzl2AXSieqh4RzhFFUO23JcjtM44d17dVhweiG5Hdv+fyO5aje8EOcyk+xIe6OoyMne5WEbLTyXHBgNhBDwjaCRnFt1wjggl5eQf6UEuUptyT0QeRw54F1eVavRsrqO15EDmZi8iltl+SsyqkTm5DkQW7gihawthfKMTDPVik5LTihiWwouYRxhwp9bStunULXdFy3X11KOzgWPILeEI6ES4RTkrDoKclYdqcn1/zhwETlwpCAXWlBBzqpao6UbOXCkIzfuXpkpB450ec6uTyAHjoKcVUdBzqqjIIdsJ9R7SZ0nl9J//2yp6giLa1S1D1TvM2eO2S7s6DCyH5S+OJzgkmr7WAW5OjnQQT6Vuw1UkKPJYfknh2PLcQo+4rrJ4+ChyGHlJZPzHCnn5MBCl8fkRy3+cR/cTbtesqOWCsUbubJdXn25nRtH/ka5Q6mqoyfmuTKIcd1afJLjkN8oj0kqyCmiJdntXLTkVE1vh6K2lAxoyXEJbE1y+JJq+1hdGy1bar+EqsTqOI1FhCDVOxThe4WZXIotnyMnPExz1UlOO8hcnSQn3PhTpJ3MQ8k5kANHQc6qIzW5/l8JLiIHjhTkQgsqyFlVa7R0IweOdOTG3Ssz5cCRLs/Z9QnkwFGQs+ooyFl1FOSe9PYLvDu3YrUUabtlrwBoov2Tz5xq/3BBuoIjsD/XsnU8xV0vucZJ+yN32943pyBXceSQnBz6yV8z4EZy35zsRl7VMg65+S7nOewIHGTT5MCBfApWEPTBH7Xc6T3jyLVlSyXyIHJcN9JzdV2qSynPofpXQbUSMU8OXsP8wTCQXBkMhUtw+zlyDvMcqcb20+TO3fX4AY3aEupcnpPH4RLYXHJCn3vU9Q6FFA6VuVZbCkUBvhA3yuNkamWf+w7FlhrJcZ3XlHNy3DMR5KzKgaMgZ9WRmlz/rwQXkQNHCnKhBRXkrKo1WrqRA0c6cuPulZly4EiX5+z6BHLgKMhZdRTkrDoKcsiRkddfHeSqr+gXVt0RlrCdMWMT4Sy56RuLfZIc4R13bu+HO71l4y7INZADHeTTu1ZmEDlrqpPDckKOnBO5552LaLNMXqzkOVLCU0iGSu6qQeqrLdujv3AwQ5XasrFCITvbIPevY8MdZ4tcFp8w3GLvmfvpW4vy/shZzXPaea9P7qG1JRc3HkgOD3WNOshxhWLZiLvhgxnSvUPhzAql8vXu4r3lA99bWlaQsyoHjoKcVUdqcv2/ElxEDhwpyIUWVJCzqgq53p8Ghq4USy5kS0HOqoKcVQU5qwpyVvUXj/vL2OXIHcgAAAAASUVORK5CYII=” alt=”” />,可以看到<thead>定义的表头“Month Savings”在css代码的影响下显示成绿色,同理可得<tbody><tfoot>的用法一样,只是顺序不同,这里有个规则:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签,在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。此外,<thead>还有一些别的属性:例如algin:定义 thead 元素中内容的对齐方式,valign:规定 thead 元素中内容的垂直对齐方式,这些你有兴趣的话可以去w3school看看。<col>和<colgroup>可以对全部列进行应用样式,这样就不需要对各个单元和各行重复应用样式。<col>对列进行应用样式,它的子属性<span>规定 <col> 元素应该横跨的列数,来看个例子:

<!DOCTYPE html>
<html>
<body><table border="1">
<colgroup>
<col span="2" style="background-color:red"/>
<col style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table></body>
</html

网页显示:aaarticlea/png;base64,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” alt=”” />,我们可以看到<span>的值是2,所以连续两列背景是红色的,当我把它改成“”时,网页就会显示:aaarticlea/png;base64,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” alt=”” />,就变成一列红色,而下面没有定义的默认值是1,所以第二列是黄色的,这边说明一下<col>和<colgroup>两者的区别,<col>格式比如<col span=”value” style=”css代码”>在一些软件是可以运行的,但严格意义上需要包含在<colgroup></colgroup>内部,且<col>不能写成<col></col>。还有align属性,不过貌似浏览器不支持。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,023
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,513
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,361
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,143
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,774
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,853