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

创建一张表格

很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据。在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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值