本文介绍: table:表示一个表格的开始和结尾,所有表格的内容全部被嵌套在 table元素中,必须。在表格中一行多少列是固定不变的如果需要进行单元格的增减,则可以使用合并单元格的形式。thead:不是必须,多嵌套表头,也就是表格的第一行 一般搭配css使用。在一个表格中可以再次嵌套一个表格,但是注意,被嵌套的表格必须放置在td中。tbody:一般嵌套表格的主体部分,不是必须,多搭配css使用。tr:表示一行,被table嵌套,内部嵌套td,必须。td:表示一列,被tr嵌套,必须。bgcolor: 颜色。
基础表格
<table>
<caption>我是表格的标题</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
标签介绍
-
table:表示一个表格的开始和结尾,所有表格的内容全部被嵌套在 table元素中,必须
-
tr:表示一行,被table嵌套,内部嵌套td,必须
-
td:表示一列,被tr嵌套,必须
-
thead:不是必须,多嵌套表头,也就是表格的第一行 一般搭配css使用
-
th:效果同td,只不过内部文本自动居中加粗
-
tbody:一般嵌套表格的主体部分,不是必须,多搭配css使用
-
caption:用来设置表格标题,不是必须
注意:table、tr、td以上三个元素在表格中缺一不可 横行竖列
运行效果
默认无边框 通过<table border="1"> </table>
设置边框
背景色
bgcolor: 颜色
在html中设置颜色时可以使用以下三种方式
- 直接使用颜色的单词
- 色号 #FFFFFF – #000000
- 使用IDE工具提供的选色工具
- 使用rgb三原色设置
<tr bgcolor="coral">
<th>列1</th>
</tr>
水平对齐
align:水平对齐单元格内部的内容 right left center注意默认是局左对齐
<td align="right">列1</td>
垂直对齐
valign:垂直对齐 top bottom middle
<td valign="top">列1</td>
<td valign="middle">列2</td>
<td valign="bottom">列3</td>
合并单元格
在表格中一行多少列是固定不变的如果需要进行单元格的增减,则可以使用合并单元格的形式
不能随意少写或者不写单元格 colspan=“合并单元格的个数”
<td colspan="5">列1</td>
表格嵌套
在一个表格中可以再次嵌套一个表格,但是注意,被嵌套的表格必须放置在td中
<td>
<table bgcolor="greenyellow" cellspacing="0"
border="1px" width="100%" height="100%" bordercolor="red">
<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>
</td>
样式预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="500px" height="400px" border="1px"
cellspacing="0">
<caption>我是表格的标题</caption>
<thead>
<tr bgcolor="coral">
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">列1</td>
<td align="left">列2</td>
<td align="center">列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td valign="top">列1</td>
<td valign="middle">列2</td>
<td valign="bottom">列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td colspan="5">列1</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>
<table bgcolor="greenyellow" cellspacing="0"
border="1px" width="100%" height="100%"
bordercolor="red">
<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>
</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
</tbody>
</table>
</body>
</html>
运行效果
原文地址:https://blog.csdn.net/qq_29917503/article/details/135600119
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_57804.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
主题授权提示:请在后台主题设置-主题授权-激活主题的正版授权,授权购买:RiTheme官网
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。