本篇文章主要为大家讲述的就是关于html table表格标签的边框用法,一般我们都是把边框线设置为1来演示边框的方法。接下来我们一起来看这篇关于html table表格标签的边框用法的文章吧
首先我们看看表格是怎么定义的:
表格由
标签来定义。每个表格均有若干行(由标签定义),每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
好了,我们先来上手制作一个简单的表格:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<table border="1" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>
</body>
</html> Salin selepas log masuk
这是一个简单的三行三列的表格,如图:
对于很多初学HTML的人来说,表格
是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。一般我们用表格的时候总会给它个border属性,比如:
,其效果如上图:可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,大家看到的宽应该是
之间有间隙所致。因此只需要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table> Salin selepas log masuk
效果如下:
我们一开始在table上面加了border=1的原因,因为本身就给table加了一个默认的黑色线条样式,就是我们上面说的,td以及table都有默认的黑色边线,因此如果需要彻底解决这个问题,让边框可以正常显示,再给表格加个颜色,
<table border="1px" bordercolor="#FF0000" cellspacing="0px" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table> Salin selepas log masuk
黑色看不明显,我们换成红色的
总结:如图就是黑色边框变红了,我们可以在里面加内容还有调整大小等,里面还可以调文字,总之就是table表格的用处是挺大的。这篇文章我们就介绍了table表格的边框,当然我们实际应用的时候很少有边框的,除非一些特殊的情况才用边框。一般我们都是把边框线设置换成0的,这样就没有边框线了,但是我们在教学中基本上边框都要等于一,方便看也方便调整。
【小编推荐】
html p标签能包含a标签吗?html p标签的作用说明
html a标签是怎么使用的?html a标签的使用总结
Atas ialah kandungan terperinci 如何制作html表格的边框?HTML table表格制作及实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
2018-09-11 16:45:17
2018-09-11 16:39:07
2018-09-11 16:29:40
2018-09-11 16:10:13
2018-09-11 16:05:55
2018-09-11 16:01:50
2018-09-11 15:55:13
2018-09-11 15:50:18
2018-09-11 15:43:40
2018-09-11 15:34:44
Topik-topik yang berkaitan
Lagi>