HTML&CSS基础学习笔记1.14-创建表格

来源：互联网发布：wps表格怎么恢复数据编辑：程序博客网时间：2024/04/29 17:53

创建一张表格

很多时候我们需要在网页上展示一些数据，使用表格可以很好的来展示数据。在HTML中<table>标签定义表格：

<table></table>

代码实例：

<span style="font-family:Microsoft YaHei;"><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>创建一个表格</title></head><body>    <h1>使用table标签</h1>    <table></table></body></html></span>

结果会是怎样的呢？

添加一行

<table>标签相当于定义了一个表格容器。我们现在要创建表格的行，等会我们再创建列。标签<tr>表示<table>里的行，在<table>里嵌套了几个完整的（拥有开始标签和闭合标签的）<tr>标签就表示这个<table>有几行：

<table>    <tr></tr>    <tr></tr>    ...</table>

添加一列

在给表格创建了行之后，我们要给表格的行里面添加单元格，标签<td>表示HTML 表格中的标准单元格。

现在我们可以把要显示的内容放到<td>标签里，我们可以看到页面会把标签<td>里的内容呈现在页面上。为了方便观察表格单元格的情况，我们给table加了border属性。

<table border="1"></table>

[border]属性我们会在以后的文章中具体讲解，你也可以先自行搜查下资料哈~

加上<td>结构的语法是这样：

<table>    <tr>        <td></td>        <td></td>        ...    </tr>    <tr></tr>    ...</table>

实际代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>创建一个表格</title></head><body><h1>使用td标签</h1><table border="1" width="300" height="300">    <tr>        <td>            </tr></table></body></html>

这时候的页面部分截图会变成这样：

添加多行多列

我们已经知道表格是怎样生成的了，我们来尝试下给页面添加一个多行多列的表格吧。

抛出问题，如何给页面一个至少三行三列的表格？想知道内容就前往http://www.mayacoder.com/lesson/index体验学习吧~

答案参考来啦：

0 0