Dreamweaver简单的表格附加代码

表格

创建列表
单元格的合并
一、创建列表
1，表格标签
2，表格的基本结构
3，表格的属性

1、表格标签

table:用来定义表格，整个表格包含在table里，成对出现；
tr：用来定义表格中的行，成对出现；
td：表格的列标记，也是表格的单元格，成对出现；
th：表头元素（特征加粗，居中）；
caption：表格的标题标签，好处，标题是定义在表格内部的，跟随表格移动。

2、表格的基本结构

<table><tr><th></th><th></th></tr><tr><td></td><td></td></tr></table>

3、表格的属性

(1) table

<table width="600" height="500" border="1" >巴拉巴拉</table>
#width 设置表格的宽度，一般为百分制形式
height 设置表格的高度
border 用来设置边框的粗细，属性值只能为整数。

width 设置表格的宽度
height 设置表格的高度
border 用来设置边框的粗细，属性值只能为整数。

(2) td

<td align="center">巴拉巴拉</td>
<td valign="baseline">巴拉巴拉</td>
#align 水平对齐
valign 垂直对齐

align 水平对齐
valign 垂直对齐

(3) 表格的背景属性

**表格的背景属性一般分为背景颜色和背景图像**

bgcolor 设置整个表格或者某个单元格的背景颜色
background 设置整个表格或者某个单元格的背景图像
二、单元格的合并
横向：<td colspan="2">表格此时的内容</td> #2表示合并几个格
纵向：<td rowspan="2">表格此时的内容</td>

演练

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
<table width="100%" cellpadding="34" cellspacing="0" border="1"><caption style="border: none;border-bottom: 2px dashed" style="color: aqua"><h1>受理员业务统计表</h1></caption>
</table>
<table width="100%" cellpadding="40" cellspacing="0" border="1"><p align="right">2020-09-23——2020-09-30</p><ol><tr bgcolor="#888"><td align="center" colspan="2" rowspan="2" style="color:#39C3B4">受理员</td><td align="center" colspan="2" rowspan="2" style="color:#39C3B4">受理数</td><td align="center" colspan="2" rowspan="2" style="color:#39C3B4">自办数</td><td align="center" colspan="2" rowspan="2" style="color:#39C3B4">直接解答</td><td align="center" colspan="2" style="color:#39C3B4">拟办意见</td><td align="center" colspan="2" style="color:#39C3B4">返回修改</td><td align="center" colspan="3" style="color:#39C3B4">工单类型</td></tr><tr><td>同意</td><td>比例</td><td>数量</td><td>比例</td><td>建议件</td><td>诉求件</td><td>咨询件</td></tr><tr><td bgcolor="pink" align="center" rowspan="4">受理处</td><td bgcolor="#087">张三</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="#087"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="#087"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr bgcolor="#087"><td align="center">总计</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td><td align="center">20</td></tr><tr><td bgcolor="pink" align="center" rowspan="3">话务组</td><td bgcolor="#087">李四</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="#087">总计</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td><td bgcolor="#087">20</td></tr></ol>
</table>
</body>
</html>

运行结果

Dreamweaver简单的表格附加代码相关推荐

个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
html制作固定列的表格,带固定列的简单HTML表格
我期望中间列的宽度是左右两列的3倍. 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现.换句话说,最后一列的宽度是前两个宽度的3倍 ...
spring诸如方式_一个简单的步进器，具有诸如下一步，返回和结束之类的简单动作，可以执行简单的表格
spring诸如方式 Vue步进器. (Stepper for Vue.) A simple stepper with simple actions such as next, back and fi ...
dw打开html不显示表格,利用Dreamweaver处理网页表格方法
利用Dreamweaver处理网页表格方法 1．创建表格 (1)创建新表格利用Dreamweaver4.0创建新表格时,首先选中对象面板上"View"栏目下"Stand ...
甘教课标版小学生计算机课,测评：《第6课制作简单的表格教案》小学信息技术甘教课标版五年级上册教案4696(2)...
5．如果应改变表格的长度跟高度,则把鼠标移到表格的竖线和横线上,当鼠标变成"|"和"="时,按住滑鼠左键,拖动鼠标,即可拖动半径和高度. 6．在表格中输入火车时 ...
使用计算机怎样制表格,如何在电脑上制作简单的表格？
现在电脑是非常普及的一个东西,基本上人手一个.用电脑上的Excel记录一些数据以及做一些数据统计是非常便利的.所以,今天,我们来讲讲怎么来制作一个简单的表格.电脑上一般都会有Excel软件.现在我们说 ...
html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果
前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: 日期参与团购场次团购结果当前状态 02.08 第一 ...
微信小程序之图表系列——最简单的表格制作
一图胜千言,相信很多开发者都没有绕开过图表制作这个坑,在小程序中也是,当然可以用第三方echart等制图插件来做,但小程序要求代码量最大12M,还得分好几个包,一个echart插件就将近1M,要是只做 ...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...

Dreamweaver简单的表格附加代码

表格

1、表格标签

2、表格的基本结构

3、表格的属性

(1) table

(2) td

(3) 表格的背景属性

演练

运行结果

Dreamweaver简单的表格附加代码相关推荐

最新文章

热门文章