HTML中表格怎么制作

最新推荐文章于 2024-09-18 15:45:03 发布

尤里卡_1006 (胡健)

最新推荐文章于 2024-09-18 15:45:03 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_51735681/article/details/115486515

版权

本文介绍了HTML中表格的创建，包括`<table>`, `<tr>`, `<td>`等标签的使用，以及表格边框、表头、标题、跨行跨列、单元格边距和间距的设置方法。通过实例展示了各种标签的效果。" 104942021,4133631,"解决OpenCV imshow报错：ASSERT: ""false"" in file qasciikey.cpp, line 501

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

HTML中表格怎么制作：
首先来介绍一下HTML中的表格标签：
在这里插入图片描述

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据**（table data）**，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
接下来，我们举个例子来展示一下以上所介绍的标签的效果：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格展示示例</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<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>

以上代码运行出来的效果是这样的：
在这里插入图片描述
（---------------------------------------分割线--------------------------------------）
在HTML表格中，如果不定义边框属性，表格将不显示边框。这个属性有时很有用，但是大多数时候，我们希望显示边框。
以下是不带边框的表格举例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>不带边框的表格示例</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400