50.0/表格(详细版)

最新推荐文章于 2024-11-12 11:19:19 发布

光明是人的信仰

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量956

点赞数 26

文章标签：前端

本文链接：https://blog.csdn.net/m0_65227896/article/details/134980609

版权

本文详细介绍了如何使用HTML创建和样式化表格，包括建立表格、设置边框、调整宽高、设定背景颜色、控制边框颜色、定位表格、添加表头和标题，以及单元格的跨行和跨列合并。通过实例展示了各种技巧，帮助读者掌握表格布局方法。

摘要由CSDN通过智能技术生成

通过前面的学习，

我们已经掌握了网页中一些最基本、最常见、最重要的应用，

下面介绍网页的一个非常关键的应用—— 表格。

HTML 中的表格不仅能完成字面功能，

即建立课程表之类看得见的表，

其更重要的意义在于网页的巧妙布局，

页面元素的精确定位等等。

50.1 建立表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），

每行被分割为若干单元格（由 <td> 标签定义）。

字母 tr 指表格行（ table row ），

td 指表格数据（ table data ），即数据单元格的内容。

数据单元格可以包含

文本、图片、列表、段落、表单、水平线、表格等等。


<html>
<head>
 <title>建立表格</title>
</head>
<body>
<h4>一列：</h4>
<table border="1">
<tr>
 <td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
 <td>100</td>
 <td>200</td>
 <td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
 <td>100</td>
 <td>200</td>
 <td>300</td>
</tr>
<tr>
 <td>400</td>
 <td>500</td>
 <td>600</td>
</tr>
</table>
</body>
</html>

在浏览器中打开网页，效果如下：

50.2 表格边框

上例中的 “border=1” 就是用来设置表格边框的，它规定表格的边框为 1 像素。

<html>
<head>
 <title>表格边框</title>
</head>
<body>
<h4>带有普通的边框：</h4> 
<table border="1">
<tr>
 <td>First</td>
 <td>Row</td>
</tr> 
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>
<h4>带有粗的边框：</h4> 
<table border="8">
<tr>
 <td>First</td>
 <td>Row</td>
</tr> 
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>
<h4>带有很粗的边框：</h4> 
<table border="15">
<tr>
 <td>First</td>
 <td>Row</td>
</tr>
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>
</body>
</html>

在浏览器中打开网页，效果如下：

从上例可以看出，

“ border” 只能控制外边框的粗细。

我们用 “table” 的 “cellspacing”属性来控制内边框的粗细，即单元格与单元格之间的距离。

<html>
<head>
 <title>单元格间距</title>
</head>
<body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
 <td>First</td>
 <td>Row</td>
</tr> 
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1" cellspacing="10">
<tr>
 <td>First</td>
 <td>Row</td>
</tr> 
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>
</body>
</html>

在浏览器中打开网页，效果如