要踏入程序员的大门,我们必会经过的路就是html,掌握基础的html才能更好的学习接下来的技术,那么今天我们就来全方面的分享一下html表格相关的知识。
1、
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,
a,什么时候使用?在什么时候使用如果表格需要使用标题,那么就可以使用
b,如何使用?
或者 | 标记
b,可选属性 设置水平对齐方式 格式:align=“颜色值” botton:靠顶端对齐 top:靠底部对齐 middle:居中对齐 4, | 和 |
a, | 和 | 都是单元格的标记,其必须嵌套在 |
---|---|---|---|---|---|
是表头标记,通常位于首行或者首列, | 中的文字默认会被加粗,而 | 不会
c, | 是数据标记,表示该单元格的具体数据
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表格知识总结的详细内容。更多信息请关注PHP中文网其他相关文章! 本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
在 PHP 中利用 VueJS 组件
我想混合由Php和VueJS组件生成的基本HTML,而不必一直使用VueJS到最低的dom叶子。父布局应用了Vue应用程序,所有标头、导航、旁注等都是Vue组件,大多数页面上的主要...
来自于 2023-11-11 00:01:44
0
2
288
如何在 next js 13 中使用开放图元标记?
在最近的NextJS13更新中,他们引入了一种处理元标记的新方法,该方法与传统方法不同,即创建NextHead并编写常用的html元标记。在新方法中,我们创建一个类似元数据对象的方...
来自于 2023-11-10 23:03:51
0
1
527
PHP邮件发送器无法正常工作:没有错误日志,消息显示已发送,但未收到
我的网络服务器的php错误日志中没有收到任何错误日志。我尝试过多个不同的SMTP服务器(我知道的其他电子邮件提供商也可以使用)。这是我的HTML表单:<formaction=...
来自于 2023-11-10 15:02:39
0
1
218
只选择月份和年份的v-date-picker
请告诉我是否有其他方法可以使用v-date-picker来执行此操作。我只希望用户能够选择年份和月份,然后日期选择器菜单应该关闭。这是我的html作为示例,但我不介意使用不同的代码...
来自于 2023-11-10 14:05:05
0
1
269
重写后的标题为:SweetAlert2: "onBeforeOpen" 参数未知
我正在使用Laravel5.8和Sweetalertv2,我尝试用它在Blade上触发此警报:Swal.fire({title:'<h4style="color:#...
来自于 2023-11-10 09:39:01
0
1
257
热门教程
更多>
|