【HTML学习】表格相关（01）- 增强版
2024-05-22 07:44:01
尚未完结，持续更新中…
相关标签
基础标签
<table></table>
【标签属性】
align
frame
width
height
border
bgcolor
bordercolor
cellpadding
cellspacing
<tr></tr>
【标签属性】
align
valign
bgcolor
<td></td>
【标签属性】
align
colspan
rowspan
backcolor
background
进阶标签
<colgroup></colgroup>
<caption></caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<col></col>
<th></th>
【标签属性】
colspan
相关网址
HTML 表格 (w3school.com.cn)
使用问题
应用示例
1
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>表格中的表头(Heading)</title> </head><body><p>本例演示如何显示表格表头</p><h4>表头：</h4><table border="1"><tr><th>姓名</th><th>性别</th><th>电话</th></tr><tr><td>SUNxRUN</td><td>男</td><td>xxx</td></tr></table><h4>垂直的表头：</h4><table border="1"><tr><th>姓名</th><td>SUNxRUN</td></tr><tr><th>性别</th><td>男</td></tr><tr><th>电话</th><td>xxx</td></tr></table></body></html>【结果】
2
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>带有标题的表格</title> </head><body><p>本例演示一个带标题 (caption) 的表格</p><h4>这个表格有一个标题，以及粗边框：</h4><table border="6"><caption>我的标题</caption><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>【结果】
3
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>跨行或跨列的表格单元格</title> </head><body><p>本例演示如何定义跨行或跨列的表格单元格</p><h4>横跨两列的单元格：</h4><table border="1"><tr><th>姓名</th><th colspan="2">电话</th></tr><tr><td>SUNxRUN</td><td>xxx</td><td>xxx</td></tr></table><h4>横跨两行的单元格：</h4><table border="1"><tr><th>姓名</th><td>SUNxRUN</td></tr><tr><th rowspan="2">电话</th><td>xxx</td></tr><tr><td>xxx</td></tr></table></body></html>【结果】
4
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>表格内的标签</title> </head><body><p>本例演示如何显示在不同的元素内显示元素</p><table border="1"><tr><td><p>这是一个段落。</p><p>这是另一个段落。</p></td><td>这个单元包含一个表格：<table border="1"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>这个单元包含一个列表：<ul><li>苹果</li><li>香蕉</li><li>菠萝</li></ul></td><td>HELLO</td></tr></table></body></html>【结果】
5
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>单元格边距(Cell padding)</title> </head><body><p>本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白</p><h4>没有 cellpadding：</h4><table border="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>带有 cellpadding：</h4><table border="1" cellpadding="10"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table></body></html>【结果】
6
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>单元格边单元格间距(Cell spacing)</title> </head><body><p>本例演示如何使用 Cell spacing 增加单元格之间的距离</p><h4>没有 cellspacing：</h4><table border="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>带有 cellspacing：</h4><table border="1" cellspacing="10"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table></body></html>【结果】
7
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>向表格添加背景颜色或背景图像</title> </head><body><p>本例演示如何向表格添加背景</p><h4>背景颜色：</h4><table border="1" bgcolor="red"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>背景图像：</h4><table border="1" background="/i/eg_bg_07.gif"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table></body></html>【结果】
8
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>向表格单元添加背景颜色或者背景图像</title> </head><body><p>本例演示如何向一个或者更多表格单元添加背景</p><h4>单元背景：</h4><table border="1"><tr><td bgcolor="red">First</td><td>Row</td></tr><tr><td background="/i/eg_bg_07.gif">Second</td><td>Row</td></tr></table></body></html>【结果】
9
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>在表格单元中排列内容</title> </head><body><p>本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格</p><table width="400" border="1"><tr><th align="left">消费项目....</th><th align="right">一月</th><th align="right">二月</th></tr><tr><td align="left">衣服</td><td align="right">$241.10</td><td align="right">$50.20</td></tr><tr><td align="left">化妆品</td><td align="right">$30.00</td><td align="right">$44.45</td></tr><tr><td align="left">食物</td><td align="right">$730.40</td><td align="right">$650.00</td></tr><tr><th align="left">总计</th><th align="right">$1001.50</th><th align="right">$744.65</th></tr></table></body></html>【结果】
10
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>框架(frame)属性</title> </head><body><p>本例演示如何使用 "frame" 属性来控制围绕表格的边框</p><p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p><p>Table with frame="box":</p><table frame="box"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table><p>Table with frame="above":</p><table frame="above"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table><p>Table with frame="below":</p><table frame="below"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table><p>Table with frame="hsides":</p><table frame="hsides"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table><p>Table with frame="vsides":</p><table frame="vsides"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table></body></html>【结果】
综合练习
0
【结果】
【代码】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>《表格》练习题</title> </head><body><!-- 编辑第1个表格 --><table border="1px" bordercolor="yellow" bgcolor="green" width="300px" height="175px"style="border-collapse: collapse;"><caption>鲜鱼价目表</caption><thead> <!-- 表头部分 --><tr><th>序号</th><th>鱼的种类</th><th>价格</th></tr></thead><tbody><tr align="center"><td>1</td><td>草鱼</td><td>18.6</td></tr><tr valign="top"><td>2</td><td>鲤鱼</td><td>28.9</td></tr><tr><td>3</td><td>食人鱼</td><td>1000</td></tr></tbody></table><hr><!-- 编写第2个表格 --><table border="1px" style="border-collapse: collapse;" width="500px" height="300px" align="center"><caption>水果一览表</caption><thead><tr><th>编号</th><th>品种</th><th>价格</th><th>产地</th></tr></thead><tbody><tr bgcolor="green" align="center" valign="top"><td>1</td><td>红富士</td><td>12.5</td><td>山东</td></tr><tr><td>2</td><td>水密桃</td><td>16.8</td><td>平谷</td></tr><tr><td>3</td><td>西瓜</td><td>22.6</td><td>海南</td></tr></tbody></table><hr><!-- 编写第3个表格 --><table border="1px"><tr><td colspan="8">讲台</td></tr><tr><td>2-1</td><td>2-2</td><td rowspan="4">过道</td><td>2-4</td><td>2-5</td><td rowspan="4">过道</td><td>2-7</td><td>2-8</td></tr><tr><td>3-1</td><td>3-2</td><!-- <td>3-3</td> --><td>3-4</td><td>3-5</td><!-- <td>3-6</td> --><td>3-7</td><td>3-8</td></tr><tr><td>4-1</td><td>4-2</td><!-- <td>4-3</td> --><td>4-4</td><td>4-5</td><!-- <td>4-6</td> --><td>4-7</td><td>4-8</td></tr><tr><td>5-1</td><td>5-2</td><!-- <td>5-3</td> --><td>5-4</td><td>5-5</td><!-- <td>5-6</td> --><td>5-7</td><td>5-8</td></tr><tr><td colspan="8">制作人：</td></tr></table></body></html>
【HTML学习】表格相关（01）- 增强版相关推荐
- Facebook增强版LASER开源：零样本迁移学习，支持93种语言
来源| Facebook AI 研究院 译者 | Linstancy 责编 | 琥珀 出品 | AI 科技大本营(ID:rgznai100) [导语]为了加速自然语言处理 (NLP) 在更多语言上实现 ...
- [系统相关]WPS Office 2016 专业增强版 10.8.0.6470 免序列号无限制
WPS Office (10.8.0.6470) 新增功能列表 ============================================= 改进功能列表 ----------- ...
- mysqli扩展是mysql扩展的增强版_PHP学习笔记【22】--PHP数据库编程 mysql扩展库 和mysqli扩展库...
<?php // php数据库编程 //php链接有 mysql 和mysqli // $conn = mysql_connect("localh ...
- 约瑟夫环问题的学习和应用：猴子选大王（增强版）
猴子选大王(增强版) 一群猴子要选新猴王.新猴王的选择方法是:让N只候选猴子围成一圈,从某位置起顺序编号为1~N号.从第1号开始报数,每轮从1报到M,凡报到M的猴子即退出圈子,接着又从紧邻的下一只猴子 ...
- 【计算机科学】【2017.01】基于深度学习的语音信号增强
本文为西班牙加泰罗尼亚政治大学(作者:Dan Mihai Badescu)的论文,共33页. 本文探讨了利用深度神经网络对含噪语音信号进行增强的可能性.信号增强是语音处理中的一个经典问题.近年来,基于 ...
- [综述类] 一文道尽深度学习中的数据增强方法（上）
今天带来一次有关于深度学习中的数据增强方法的分享. 00 什么是数据增强 在深度学习项目中,寻找数据花费了相当多的时间.但在很多实际的项目中,我们难以找到充足的数据来完成任务. 为了要保证完美地完成项 ...
- 个人永久性免费-Excel催化剂功能第60波-数据有效性验证增强版，补足Excel天生不足...
Excel在数据处理.数据分析上已经是公认的最好用的软件之一,其易用性和强大性也吸引无数的初中高级用户每天都在使用Excel. 但这些优点的同时,也带出了一些问题,正因为其不同于一般的专业软件,需要专 ...
- QUARK的增强版C-QUARK问世，有效提升蛋白质结构从头预测精度
2021年8月18日,密西根大学张阳教授团队在Nature Communications上发表论文"Improving fragment-based ab initio protein st ...
- 小程序 a标签_微慕WordPress小程序增强版V2.0新版上线
2020年7月10日,我进行了一场微信小程序的直播,直播主题:微慕小程序增强版v2.0版新功能说明, 在直播里对微慕增强版v2.0版全面阐述了新版本增加的功能. 微慕小程序增强版定位是使用wordpr ...
- python学习手册条件-Python学习手册（第4版）pdf
Python学习手册(第4版) 内容简介 <Python学习手册(第4版)>学习Python的主要内建对象类型:数字.列表和字典.使用Python语句创建和处理对象,并且学习Python的 ...
最新文章
- 中断的顶半部和底半部
- java获取object属性值_java反射获取一个object属性值代码解析
- python的用途实例-python中pass语句意义与作用（实例分析）
- 专辑一：爱之初体验(初级)
- Web框架 — Flask
- arggis怎么修改上下标_京东自营是怎么操作的？有什么要求？
- 你绝对干过的15件傻事儿
- python绘制横向堆积柱状图_Python 堆叠柱状图绘制方法
- js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件
- HDU1880 魔咒词典【文本处理】
- Flask 应用最佳实践
- tensorflow LSTM：张量变形，5维变4维，4维变5维
- springboot接收多对象_springboot实现邮件发送
- 递归求n的阶乘不溢出_面试官：说一说递归如何优化尾递归优化
- ulipad 常用快捷键
- python日记Day12——numpy速查中文手册
- 如何用手机制作一寸或二寸证件照？
- matlab建模和仿真实验,MATLAB-Simulink系统建模与仿真-实验报告
- 计算机无法筛选怎么办,电脑突然出现什么筛选键怎么处理?
- 搜索框 放大镜图标处理