HTML+CSS基础——基础标签（表格标签（table、tr、td、th等等））

最新推荐文章于 2024-06-19 10:23:02 发布

张謹礧

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量1.7k

点赞数 26

分类专栏： HTML+CSS基础——标签文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_66547608/article/details/135288308

版权

HTML+CSS基础——标签专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
  <head>
	<title>Tables</title>
  </head>
  <body>
	<table>
		<thead>
		  <tr>
			<th></th>
			<th scop="col">Home starter hosting</th>
			<th scop="col">Premium business hosting</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<th scope="row">Disk space</th>
			<td>250mb</td>
			<td>1gb</td>
		  </tr>
		  <tr>
			<th scope="row">BandWidth</th>
			<td>5gb per month</td>
			<td>50gb per month</td>
		  </tr>
		<!-- more rows like the two above here  -->
		</tbody>
		<tfoot>
		  <tr>
			<td></td>
			<td colspan="2">Sign up now and save 10%!</td>
		  </tr>
		</tfoot>
	</table>
  </body>
</html>

这是一个包含表格的简单网页。该表格列出了两种不同的主机方案（Home starter hosting和Premium business hosting）以及它们的一些特点。

表格的第一行是表头，包括三列，分别是空白列、Home starter hosting和Premium business hosting。

接下来的行是表格的主体部分，每一行代表一种特点。第一行表示磁盘空间（Disk space），Home starter hosting拥有250MB的磁盘空间，而Premium business hosting拥有1GB的磁盘空间。第二行表示带宽（BandWidth），Home starter hosting每月有5GB的带宽限制，而Premium business hosting每月有50GB的带宽限制。

最后，表格的页脚部分包含一行，其中包含一个单元格（跨越两列）显示"Sign up now and save 10%!"。

第一段代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>Here are some of my favorite things:</p>

这一段代码包含了一个HTML的基本结构模板，即包含了一对<html>标签，并在其中包含了<head>和<body>标签。在<head>标签中，使用了<meta>标签设置了网页窗口的视口大小，并设置了一个网页标题。在<body>标签中，使用了<h1>标签和<p>标签来显示欢迎语和一些描述性文本。

第二段代码：

    <ul>
      <li>Cats</li>
      <li>Pizza</li>
      <li>Beaches</li>
    </ul>

这一段代码包含了一个无序列表（unordered list），使用<ul>和<li>标签来列举一些喜爱的事物。

第三段代码：

    <h2>My Education</h2>
    <ol>
      <li>Bachelor's degree in Computer Science</li>
      <li>Master's degree in Information Technology</li>
    </ol>

这一段代码使用了<h2>标签来声明一个标题，随后又使用了一个有序列表（ordered list），使用<ol>和<li>标签来列举作者的学历信息。

第四段代码：

    <h2>Contact Me</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="message">Message:</label>
      <textarea id="message" name="message"></textarea><br><br>
      <input type="submit" value="Send">
    </form>

这一段代码使用了<h2>标签来声明另一个标题，并构建了一个包含表单（form）的段落。这个表单包含了输入框（input）、多行输入框（textarea）和一个发送按钮，用户可以通过填写和提交表单与作者联系。

在接下来的部分，我们有两行数据行：

最后，在表格的页脚部分，我们有一个包含一个单元格的行：

<html>：HTML文档的根元素，用于表示整个网页。
<head>：文档头部的容器标签，用于包含与文档相关的元数据，如标题和样式表。
<title>：定义网页的标题，在浏览器的标题栏中显示。
<body>：文档的主体部分，包含实际显示在浏览器中的内容。
<table>：用于创建表格的标签。
<thead>：表格的头部部分，包含表格的标题行。
<tr>：表格的行。
<th>：表格的表头单元格。
<td>：表格的数据单元格。
<tbody>：表格的主体部分，包含表格的数据行。
<tfoot>：表格的页脚部分，包含在表格底部显示的内容。
colspan：在表格的单元格中使用，用于指定单元格横跨的列数。
<th scop="col">Home starter hosting</th>：这是一个表头单元格，它的scope属性设置为"col"，表示它是列的标题。它显示了"Home starter hosting"文本。
<th scop="col">Premium business hosting</th>：这也是一个表头单元格，与前一个单元格类似，也是列的标题。它显示了"Premium business hosting"文本。
<th scope="row">Disk space</th>：这是一个数据单元格，它的scope属性设置为"row"，表示它是行的标题。它显示了"Disk space"文本。
<td>250mb</td>：这是一个数据单元格，包含了"250mb"文本，表示Home starter hosting的磁盘空间。
<td>1gb</td>：这也是一个数据单元格，包含了"1gb"文本，表示Premium business hosting的磁盘空间。
<th scope="row">BandWidth</th>：这是另一个数据单元格，它显示了"BandWidth"文本。
<td>5gb per month</td>：这是一个数据单元格，包含了"5gb per month"文本，表示Home starter hosting的带宽。
<td>50gb per month</td>：这也是一个数据单元格，包含了"50gb per month"文本，表示Premium business hosting的带宽。
<td colspan="2">Sign up now and save 10%!</td>：这个单元格横跨了两列，它显示了"Sign up now and save 10%!"文本。

张謹礧

关注

26
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS基础——基础标签（表格标签（table、tr、td、th等等））

这是一个包含表格的简单网页。该表格列出了两种不同的主机方案（Home starter hosting和Premium business hosting）以及它们的一些特点。表格的第一行是表头，包括三列，分别是空白列、Home starter hosting和Premium business hosting。接下来的行是表格的主体部分，每一行代表一种特点。第一行表示磁盘空间（Disk space），Home starter hosting拥有250MB的磁盘空间，而Premium business h
复制链接

扫一扫