学习目标：

掌握<table></table>的使用和基本属性

学习内容：

标签是用来创建 HTML 表格的

简单的 HTML 表格由 table 元素以及一个或多个 tr（定义行）、th（定义表头）或 td（定义表格单元）组成。

一个简单的表格：

<table border="1">
<caption>我的标题</caption><tr><th>第一行第一列</th><th>第一行第二列</th></tr><tr><th>第二行第一列</th><th>第二行第二列</th></tr>
</table>

在上面代码块中：

border="1"意思为表格周围的边框设置为 1 像素宽，若不定义border或border="0"时，不会有边框
caption设置的是表格标题

运行后显示一个二行二列的表格：

我的标题
第一行第一列	第一行第二列
第二行第一列	第二行第二列

浏览器支持：所有浏览器都支持<table></table>标签

合并表格里的行和列：

使用colspan来合并列；使用方法如下：

<center><h4>横跨两列的单元格：</h4></center>
<table border="1">
<tr><th>姓名</th><th colspan="2">电话</th>
</tr>
<tr><td>我的名字</td><td>1235454</td><td>2552556</td>
</tr>
</table>

横跨两列的单元格：

姓名	电话
我的名字	1235454	2552556

使用rowspan来合并行；使用方法如下：

<center><h4>横跨两列的单元格：</h4></center>
<table border="1">
<tr><th>姓名</th><td>六六</td>
</tr>
<tr><th rowspan="2">电话</th><td>123456</td>
</tr>
<tr><td>123456</td>
</tr>
</table>

横跨两列的单元格：

姓名	六六
电话	123456
电话	123456

给表格设置背景颜色


<center><h4>表格背景颜色为红色：</h4></center>
<table border="1" bgcolor="red">
<tr><td>1</td><td>1</td>
</tr>
<tr><td>1</td><td>1</td>
</tr>
</table>

给表格设置背景图片


<center><h4>表格背景图片：</h4></center>
<table border="1" background="1.gif">
<tr><td>1</td><td>1</td>
</tr>
<tr><td>1</td><td>1</td>
</tr>
</table>

＜table＞＜/table＞表格标签的基本概念和基本属性相关推荐

＜table＞表格标签属性
<table>表格标签属性源代码 1.表格的相关标签 <table> table是用于定义表格的标签 <tr> ...
＜table＞表格标签
标签基本结构: <table><tr><td>111</td> </tr> </table> 表格中常用的几种标签: capti ...
前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
华为云前端一阶段HTML入门（常用标签表格标签表单）
HTML入门 HTML入门 1.1结构标签 div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系: span是会在一行中不断加入(内联标签),但当数量过多时也会 ...
HTML表格标签超级详细
HTML表格文章目录前言一.表格是什么? 二.常用属性 1.<table>常用属性 2.<tr>常用属性 3.<td><th>常用属性三.代码展 ...
充分使用表格标签(Table)
充分使用表格标签(Table) 2007-11-06 12:24 阅读5 评论0 table,caption,thead,tr,th,td,tbody,tfoot table,caption, ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
前端:HTML/05/lt;meta标记,XHTML简介及其编写规范,表格标签(lt;table)及其相关标签(lt;tr,lt;td或lt;th)
<meta>标记 <meta>的主要作用,是提供网页的元信息,如:指定网页的搜索关键字两个属性:http-equlv和name; 1,http-equiv属性:模拟http协 ...
html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表有序列表有序列表语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...

＜table＞＜/table＞表格标签的基本概念和基本属性

学习目标：

学习内容：

横跨两列的单元格：

横跨两列的单元格：

＜table＞＜/table＞表格标签的基本概念和基本属性相关推荐

最新文章

热门文章