HTML5基础08----HTML5表格使用

最新推荐文章于 2020-12-22 20:30:48 发布
最新推荐文章于 2020-12-22 20:30:48 发布
阅读量440 收藏
点赞数
分类专栏： HTML5基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47068333
版权 
<!DOCTYPE html>
<!--HTML5表格使用-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--没有边框的表格-->
<table>
    <!--行<tr>-->
    <!--列<td>-->
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--有边框的表格<table border="1">-->
<table border="1">
    <!--行<tr>-->
    <!--列<td>-->
    <!---->
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--表格中添加表头 <th>第1列</th>-->
<table border="1">
    <!--行<tr>-->
    <!--列<td>-->
    <!---->
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--表格中有空单元格-->
<table border="1">
    <!--行<tr>-->
    <!--列<td>-->
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--代有标题的表格1<p>标题1</p>-->
<p>标题1</p>
<table border="1">
    <!--行<tr>-->
    <!--列<td>-->
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--代有标题的表格2    <caption>标题2</caption>-->
<table border="1">
    <caption>标题2</caption>
    <!--行<tr>-->
    <!--列<td>-->
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--表格内的标签
       定义列表
        <td>
            <ul>
                <li>苹果</li>
                <li>苹果</li>
                <li>苹果</li>
            </ul>
        </td>-->
<table border="1">
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>苹果</li>
                <li>苹果</li>
            </ul>
        </td>
        <td></td>
        <td>第3列</td>
    </tr>
</table>
<!--单元格内边距cellpadding="15"-->
<table border="1" cellpadding="15">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--单元格外边距cellspacing="15"-->
<table border="1" cellspacing="15">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--表格背景颜色-->
<table border="1" bgcolor="#deb88715">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--表格背景图片background="images/im2.jpg"-->
<table background="images/im2.jpg">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>

</table>

</body>
</html>
zhaihaohao1
关注
专栏目录
html5基础:表格和表单控件
Marlon康
02-27 831
01 HTML5 07 表格 表格 table 存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </...
HTML基础---表格标签
weixin_48055520的博客
04-15 1428
HTML--表格标签
HTML5页面基础（二）form表单
weixin_42468092的博客
09-17 260
表单form标签
html5 表格使用基础
li5685918的博客
12-14 548
在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。 在 HTML5 中，不支持 标签的任何属性。
HTML5 表单基础
是光の谢宣骞博客
12-22 129
年轻......
HTML5基础知识-HTML5表格与列表.pptx
05-06
HTML5 是现代网页开发的基础，尤其在前端领域中扮演着至关重要的角色。表格和列表是HTML5中的两种重要元素，用于展示数据和组织内容。在HTML5中，表格（tables）和列表（lists）有着丰富的功能和样式设定，使得...
第2章 HTML5基础-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT
最新发布
06-09
### 第2章 HTML5基础-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT #### 知识点概览 - **HTML5文档结构**: 包括`<!DOCTYPE>`, `<html>`, `<head>`, 和`<body>`。 - **文本控制标签**: 如`<p>`, `<h1>-...
表格基础：LUI-3框架表格-基础组件
02-12
表格基础 该存储库包含LUI-3_forms-base组件。 具有简单响应形式的网站的理想用法，不需要任何JavaScript验证，日期选择器等。 可以使用LUI-3_forms-extras扩展此组件，其中包含jQuery select，datepicker等 不再...
table-editor:表格编辑器，用于在HTML中创建复杂的表格
05-10
表格编辑器 当Markdown不能剪切时，用于复杂表的WYSIWYG HTML编辑器。 屏幕截图 现场例子 命名法 复杂表：当表在任何地方都需要标题单元格，合并的单元格和各种类时 技术文档 这是一个纯静态JavaScript应用程序，...
HTML5 中的新标签。 基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式
11-24
HTML5 中的新标签。 基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式/节 元信息 编程 HTML5 中添加的属性。 属性 描述 = HTML5 中新的事件属性。 Window 事件属性 Form 事件 Keyboard 事件 Mouse 事件 Media 事件
HTML基本标签+表格基础+表单和框架
08-15
HTML基本标签+表格基础+表单和框架，基础知识点，初学者了解，后期将逐步加载CSS样式表与JS的使用基础知识点，大家共同使用
HTML5基础之-表格标签
bruce_suxin的博客
10-19 433
表格标签 笔记显示效果： 以上效果，下面是代码加注释： HTML标签的特殊符号 *表格标签（**重要的标签**）
html5基础 表格标签
m0_46744635的博客
07-13 124
HTML5 基础表单 学习笔记
小七的博客
05-07 208
1.表格标签 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.< table >< /table >用于定义表格的标签 2.< tr >&lt...
HTML5---基础标签(表格、表单元素)
weixin_44021474的博客
03-24 164
表格： <table> 显示表格 语法：<table width="" height="" border="" bgcolor="" background="" cellpadding="' cellspacing="" > width:表格的宽度，height:表格的高度；border：表格的边框，bgcolor表格的背景颜色，background 表格背景颜色。cell...
HTML5初学——表格标签（02-08课）
weixin_45727991的博客
11-14 271
02课、03课——表格标签 1、表格的主要作用： 主要用于显示、展示数据，因为它可以让数据显示地非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有调理。 2、基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr>
HTML5表格元素的分享！（基础分享，大神勿喷！）
li_276869731的博客
02-23 190
前言： 表格是一个好东西，它不仅可以让我们在工作上享受诸多便利，生活中也常常是随处可见。表格的特点有可视化、汇总、计算等特点。常用的软件有金山的（WPS系列）和微软的（office系列）。 那如果我们想将上面这张表格以网页的形式呈现出来，应该怎么办呢？下面就跟着小编一起往下看吧！ 前期准备： 你得需要有一款属于自己的编程软件，如：HBuilder、DW等（当然还有很多别的编辑器），小编这里用的...
HTML5基础——表单
CSMCZM的博客
06-15 246
表单 表单语法 <form method="post" action="result.html"> <p> 名字：<input name="name" type="text" > </p> <p> 密码：<input name="pass" type="password" > </p> <p> <input type="submit" name="Button" va
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值