七、HTML基础之表格
来源:互联网 发布:桌面控制软件 编辑:程序博客网 时间:2024/05/21 07:29
7.1 建立表格
7.1.1 添加表格——table、tr、td
表格一半通过3个标记来构建,分别是表格标记、行标记和单元格标记。表格标记<table></table>,表格的其他属性在<table></table>之内才有效。
语法:<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
....
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
....
<tr>
.....
</table>
7.1.2 表格的标题——caption
表格中除了<td>可以用来设置表格的单元格外,还可以通过caption来设置标题单元格,位于表格第一行,如同在表格上方加一个没有边框的行。
语法:<caption>表格的标题</caption>
7.1.3 表格的表头——th
表格的表头与<td>标记使用方法相同,但是表头是加粗显示的
语法:<table>
<tr>
<th>单元格内的文字</td>
<th>单元格内的文字</td>
....
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
....
<tr>
.....
</table>
7.2 表格基本属性
7.2.1 表格宽度——width
默认情况下,表格的宽度是与表格内的文字相关的。
语法:<table width=表格宽度>
说明:宽度的值可以是具体的像素数,也可以设置为浏览器的百分比数。
7.2.2 表格高度——height
语法:<table height=表格高度>
7.2.3 对齐方式——align
语法:<table align=”表格对齐方式”>
说明:align可以取值为left、center、right
7.3 表格的边框
7.3.1 表格的边框宽度——border
默认情况下,表格不显示边框。
语法:<table border=边框宽度>
说明:设定不为0的值,表格的边框才会显示,单位为像素。
7.3.2 边框颜色——bordercolor
默认情况下,边框的颜色为灰色,设置颜色的前提是border的值不为0
语法:<table border=边框宽度bordercolor=”边框颜色”>
说明:颜色为16位颜色代码
7.3.3 内框宽度——cellspacing
内框宽度指的是表格内部各个单元格之间的宽度
语法:<table cellspacing=内框宽度>
说明:单位为像素
7.3.4 表格内文字与边框距离——cellpadding
默认情况下,表格内的文字会紧贴表格的边框
语法:<table cellpadding=文字与边框的距离值>
7.4 设定表格背景
7.4.1 表格背景色——bgcolor
语法:<table bgcolor=”颜色代码”>
7.4.2 表格背景图像——background
语法:<table background=”背景图片的地址”>
说明:地址可以为绝对地址也可以为相对地址
7.5 修改表格的行属性
7.5.1 高度的控制——height
语法:<tr height=表格中某行高度>
说明:只对设置的这一行有效
7.5.2 边框颜色
对表格的行来说,也可以单独设置其外框颜色
语法:<tr bordercolor=”颜色代码”>
7.5.3 行背景——bgcolor、background
行的背景也可以单独设计
语法:<tr bgcolor=”颜色代码”>
7.5.4 行文字的水平对齐方式——align
表格中也可以为单独的一行设置特殊的对齐方式
语法:<tr align=”水平对齐方式”>
说明:水平对齐方式包括3种,left、center、right
7.5.5 行文字的垂直对齐方式——valign
语法:<tr valign=”垂直对齐方式”>
说明:垂直对齐方式包括3种,top、middle、bottom
7.5.6 表格标题的垂直对齐方式——valign
表格标题是一种特殊的行,水平对齐方式与行文字相同,垂直对齐指的是标题位于表格的上方或者下方。
语法:<caption valign=”垂直对齐方式”>表格的标题</caption>
说明:垂直对齐方式取top或者bottom
7.6 调整单元格属性
7.6.1 单元格大小——width、height
默认情况下,单元格的大小会根据内容自动调整
语法:<td width=单元格宽度height=单元格高度>
说明:单位是像素,而且对一个单元格的设置往往会影响多个单元格
7.6.2 水平跨度——colspan
有的单元格是跨多个列
语法:<td colspan=跨的列数>
7.6.3 垂直跨度——rowspan
语法:<td rowspan=跨的行数>
7.6.4 对齐方式——align、valign
语法:<td align=”水平对齐方式” valign=”垂直对齐方式”>
7.6.5 单元格的背景颜色
语法:<td bgcolor=”颜色代码”>
7.6.6 单元格的边框颜色
语法:<td bordercolor=”颜色代码”>
7.6.7 单元格的亮边框——bordercolorlight
语法:<td bordercolorlight=”颜色代码”>
7.6.8 单元格的暗边框——bordercolordark
语法:<td bordercolordark=”颜色代码”>
7.6.9 单元格的背景图像
语法:<td background=”背景图片的地址”>
说明:地址可以是绝对地址也可以是相对地址
7.6.10 文章内容不换行——nowrap
当单元格内容过长时,会自动换行。
语法:<th nowrap>
<td nowrap>
说明:既可以设置在表格标题中,也可以设置在普通单元格中
7.7 表格的结构
除了对表格的设计标记外,还有一些标记是用来明确表格结构的。使用这些标记能对表格的一行或者多行单元格属性进行统一修改。
7.7.1 设计表头样式——thead
用于定义表格最上端表首的样式
语法:<thead bgcolor=”颜色代码” align=”水平对齐方式”>
............
</thead>
7.7.2 表主体样式——tboby
与表头样式的标记功能类似,表主体样式用来统一设计表主体部分的样式。
语法:<tbody bgcolor=”颜色代码” align=”水平对齐方式”>
............
</tbody>
7.7.3 表尾样式——tfoot
语法:<tfoot bgcolor=”颜色代码” align=”水平对齐方式”>
............
</tfoot>
7.8 表格的嵌套
不再赘述,相似于列表的嵌套
7.9 层标记——div
也可称为区隔标记,在排版方面与表格有着相似的功能,但是层能够完成更加复杂、更加灵活的排版效果。
语法:<div id=值align=对齐方式style=样式class=应用的样式类></div>
说明:id用来标识层;align用来设定层内元素的对齐方式,包括左对齐、右对齐和居中对齐;style则用来设定层的属性,包括层的大小范围和起始位置;class用于定义层所应用的CSS样式。
- 七、HTML基础之表格
- HTML(七) 表格
- html基础之强大的表格
- html教程(七) 表格进阶
- HTML-表格基础
- Html-表格基础记录
- HTML基础、表格、表单
- 【HTML 基础】05 表格
- html表格基础
- HTML基础学习七
- HTML之JQuery基础实现可编辑表格
- HTML&CSS基础篇之十五:表格&列表
- HTML&CSS基础篇之七:XHTML 标准、规范
- HTML学习之表格
- html之表格渐变
- html之表格
- HTML之表格
- XZ_HTML之HTML表格
- 利用迭代实现逆序排列一个数字,比如输入1232,得到2321
- 自绘Windows桌面
- 建表原则
- 如何判断一个字符串中是否包含某一字符
- 数据预处理之“分类”数据离散化
- 七、HTML基础之表格
- Android 常用的adb命令
- android gridview 设置高度的方法和一些疑惑
- 数据结构和内存中堆和栈的区别
- 使用博客作为笔记的地方吧!
- MySQL 主从复制的原理和配置
- OkHttp3全面解析&注解工具butterknife
- Struts2 中实现将后台查询到的list传到前台页面的方法
- GoLang 捕获命令行参数