【HTML＋CSS网页设计与布局 从入门到精通】第5章-表格
2024-06-03 09:21:38
目录
基本表格
两个单元格合二为一（横向）
两个单元格合二为一（纵向）
四个单元格合并（横向+纵向）
表格大小
单元格内居中对齐
右对齐
底部对齐
表格背景颜色
表格单元格边缘距
例子
例子一
例子二
表格名称caption
基本表格
<html><head><title>基本表格</title></head><body><center><table border=1><tr><td> A1</td> <td>A2</td><td>A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B2</td><td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
两个单元格合二为一（横向）
<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td colspan="2">A2A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B2</td><td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
两个单元格合二为一（纵向）
<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td rowspan="2">A2<br>B2</td> <td>A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
四个单元格合并（横向+纵向）
<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
表格大小
<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
单元格内居中对齐
<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
右对齐
<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr align="right"><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
底部对齐
<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr align="right"><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
表格背景颜色
<html><head><title>表格</title></head><body><center><table bgcolor="#CCCCCC" border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr bgcolor="#999999" align="right"><td>C1</td> <td bgcolor="#555555">C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
表格单元格边缘距
<html><head><title>表格</title></head><body><center><table bgcolor="#CCCCCC" border="1" height="150" width="200" cellpadding="4" cellspacing="6"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr bgcolor="#999999" align="right"><td>C1</td> <td bgcolor="#555555">C2</td><td>C3</td> <td>C4</td></tr></table></center></body>
</html>
例子
例子一
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格演示</title>
</head><body>
<table width="400" border="1" align="center" bordercolor="#003399">
<thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot>
</table></body>
</html>
例子二
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格演示</title>
<style type="text/css">
thead{background-color:#555;color:white; }
tfoot{background:#BBB;}
</style></head><body>
<table width="400" border="1" align="center" bordercolor="#003399">
<thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot>
</table></body>
</html>
表格名称caption
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格演示</title>
<style type="text/css">
thead {background-color:#555;color:white;
}
tfoot {background:#BBB;
}
</style>
</head>
<body>
<table width="400" border="1" align="center" bordercolor="#003399"><caption>产品介绍表</caption><thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot>
</table>
</body>
</html>
【HTML＋CSS网页设计与布局 从入门到精通】第5章-表格相关推荐
- 【HTML＋CSS网页设计与布局 从入门到精通】第4章
目录 超链接 h1,h2,h3... 图片超链接 邮件超链接 图像热区超链接 图像热区超链接-自己作图 图像热区超链接-多热区 插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS
目录 开始 新增设置 英文字母全部小写 字号设置 首字母"大"写-大一点显示 上划线,下划线text-decoration:underline overline; 缩进text-i ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器
目录 标记选择器+类别选择器 并集选择器+集体声明 后代(嵌套)选择器 继承关系演示 前沿Web开发教室 继承关系演示-选择器1 继承关系演示-选择器2 还可以写成这样批量的整 或者 再或者 or 层 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录 初始表格 边距.居中.边框 单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS
目录 开始 背景+颜色 将图片当做背景background-image:url(bg-h.gif); x方向(横向)重复显示图片: y方向(纵向) 不重复显示图片background-repeat:n ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第11章-CSS
目录 图像class选择器 设置图片每个边框的格式:颜色,线型 另一个例子 图文混排 图片左对齐,居中,右对齐 竖直对齐 竖直对齐:具体数值-负数 八大行星:图文混排 图像class选择器 <h ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
目录 无格式 图文并茂 标题h1格式 图片img格式 正文p格式 body格式 ID选择器的优先级低于标记选择器 无格式 <html> <head> <title> ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第7章-class、ID选择器，CSS格式
目录 class选择器 class选择器-例外 class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种"宏"的使用方式 使用CS ...
最新文章
- cmake find_package opencv 找不到
- matlab ga rbf,GA PSO优化的RBF神经网络
- ITK:从文件读取转换
- 安装Bootstrap3源码版本
- android dialog 隐藏状态栏_Flutter-最近搞了个项目-启动页Splash，Navigator.pop无法关闭Dialog...
- mysql——启动服务问题Found option without preceding group in config file
- JMeter Exception: java.net.BindException: Address already in use: connect（转）
- 学写压缩壳心得系列之一 熟悉概念，未雨绸缪
- 阿里云mysql远程连接_阿里云从0安装mysql到远程连接
- 实现安卓中TextView，EditText中数字的数码管字体显示
- 字体arial不支持样式regular的解决方法
- python乱码怎么办_python中urllib.unquote乱码的原因与解决方法
- 用计算机税额怎么计算,企业所得税计算器(企业税收怎么算计算器)
- 工业镜头与普通镜头有什么区别？
- 小虾米的求助Massage
- VBA-API：通过BEEP函数(扬声器)播放音乐
- 黎想首谈14大权威新媒体推广平台，教你一招搭建信息流矩阵！
- ASP.NET2.0关于BIN目录下DLL文件访问的问题
- 超级计算机神威太湖之光图片,超级计算机“神威·太湖之光”世界最快
- Mesh 无线自组网系统