首页 / HTML / html表格知识总结
html表格知识总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html表格知识总结,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3146字,纯文字阅读大概需要5分钟。
内容图文
![html表格知识总结](/upload/InfoBanner/zyjiaocheng/393/b5030ed5e01b47d49f3a6d842fcb5152.jpg)
1、<table>标记
a,基本格式<table 属性1=“属性值” 属性2 =属性值>表格内容</table>
b,table 标记的属性
width属性:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分之百(%)
height属性:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分比(%)
border属性:表示表格外边框的宽度
align属性:表格的显示位置,值left居左显示 center居中显示 right居右显示 默认left
cellspacing属性:单元格时间的间距,默认2px ,单位像素
cellpadding属性:单元格内容与单元格边框的显示距离,单位像素
frame属性:控制表格边框的显示距离
void(默认值) 表示无边框
above 表示仅顶部有边框
below 表示仅有底部边框
hsides 表示仅有顶部边框和底部有边框
lhs 表示仅有左侧边框
rhs表示仅有右侧边框
vsides表示仅有左右侧边框
box 包含全部4个边框
border包含全部4个边框
rules属性:控制是否显示以及如何显示单元格之间的分割线
none(默认值)表示无分割线
all 表示包括所有分隔线
rows表示仅有行分割线
clos表示仅有列分割线
groups表示仅在行组合列组之间有分割线
c,制作一个简单的网页布局
2,<caption>标记
a,什么时候使用?在什么时候使用如果表格需要使用标题,那么就可以使用<caption>标记
b,如何使用?<caption>属性的插入位置,直接位于<table>属性之后就,<tr>表格行之前
c,align属性
top:标题放在表格的上部
botton:标题放在表格的下部
left:标题放在表格的左边
right:标题放在表格的右边
3,<tr>标记
a,定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,每一行<tr>标记哪可以嵌套多个<td>或者<th>标记
b,可选属性
设置水平对齐方式 格式:align=“颜色值”
botton:靠顶端对齐
top:靠底部对齐
middle:居中对齐
4,<td>和<th>
a,<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现
b,<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会
c,<td>是数据标记,表示该单元格的具体数据
d,两者的标记属性都是一样的
e,属性
bgcolor:设置单元格背景
align:设置单元格背景
valign:设置单元格垂直对齐方式
width:设置单元格宽度
height:设置单元格高度
rowspan:设置单元格所占行数
clospan:设置单元格所占列数
eg:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="960" height="250" border="1" cellpadding="10" frame="box" > <caption>表格的标题</caption> <tr bgcolor="#ccc"> <th bgcolor="red">班级</th> <th>姓名</th> <th>年级</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>16</td> <td>70</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>16</td> <td>60</td> </tr> </table> </body> </html>
以上就是最基础的html表格的一些相关内容,根据上面的教程来完成一个表格,我相信你会有很大的收获。
相关推荐:
全方位介绍HTML表格属性
重新发现HTML表格
关于HTML表格的详细介绍
HTML表格布局实际使用
HTML表格布局实例讲解
以上就是html表格知识总结的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的html表格知识总结全部内容,希望文章能够帮你解决html表格知识总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。