<table>表格标签
2017-12-08 08:27
211 查看
<table>表格标签
(1)结构
①<tr></tr>表示行,<td></td>表示列
一组<tr>包含多组<td>就表示一行有多列
也可以有多组<tr>
②<th></th>表示表头,用法和td一样
③<caption></caption>:表格的标题
④⑤⑥
(2)属性
①border:定义表格边框
②rowspan=“数字”:跨行(合并同一列上的单元格)
③colspan=“数字”:跨列(合并同一行上的单元格)
④width:table、td可以设置宽
⑤height:td可设置高
⑥align:居中显示表格(值有center、left、right),如果加在tr的话就是
整一行里面的内容在表格里面居中
⑦去掉单元格间隙用cellspacing=“0”
⑧cellpadding=“数值”就是单元格里面的内容距离边框的距离
⑨bgcolor:表格的背景颜色
⑩内容垂直对齐方式:valign=“top/middle/bottom”单元格里面的内容
在垂直方向上居顶/居中/居底
对于复杂的表格将表格分为三部分:题头(thead,用来放标题之类的东西)、正文(tbody放数据本体)、
脚注(tfoot,放表格的脚注)
这三个部分不管在编译页面如何排序,浏览器执行时都会按照thead、tbody、
tfoot的顺序排列显示(表格里面的<thead>只是一个标记,告诉我们这是表格
的头部,不能在<thead>上加属性,要改变表格头的话就只能在thead里面的tr
改)
(3)如把table中的双线边框变为单线边框:
cellspacing="0" cellpadding="0"
单元格间距为0,单元格内边距为0
(4)做表格的步骤
①分析有几行
②分析有几列
③如果有跨行跨列的情况存在,要注意删掉多余的内容
(5)网页中会用到的图片格式
<1>矢量图:放大缩小都不会失真(清晰度不变)
<2>位图:像素图(由像素点拼成)
P.S.
①Web优先使用PNG
②照片、色彩要求高的图片jpg
③web中的小动画gif
(1)结构
①<tr></tr>表示行,<td></td>表示列
一组<tr>包含多组<td>就表示一行有多列
也可以有多组<tr>
②<th></th>表示表头,用法和td一样
③<caption></caption>:表格的标题
④⑤⑥
(2)属性
①border:定义表格边框
②rowspan=“数字”:跨行(合并同一列上的单元格)
③colspan=“数字”:跨列(合并同一行上的单元格)
④width:table、td可以设置宽
⑤height:td可设置高
⑥align:居中显示表格(值有center、left、right),如果加在tr的话就是
整一行里面的内容在表格里面居中
⑦去掉单元格间隙用cellspacing=“0”
⑧cellpadding=“数值”就是单元格里面的内容距离边框的距离
⑨bgcolor:表格的背景颜色
⑩内容垂直对齐方式:valign=“top/middle/bottom”单元格里面的内容
在垂直方向上居顶/居中/居底
对于复杂的表格将表格分为三部分:题头(thead,用来放标题之类的东西)、正文(tbody放数据本体)、
脚注(tfoot,放表格的脚注)
这三个部分不管在编译页面如何排序,浏览器执行时都会按照thead、tbody、
tfoot的顺序排列显示(表格里面的<thead>只是一个标记,告诉我们这是表格
的头部,不能在<thead>上加属性,要改变表格头的话就只能在thead里面的tr
改)
(3)如把table中的双线边框变为单线边框:
cellspacing="0" cellpadding="0"
单元格间距为0,单元格内边距为0
(4)做表格的步骤
①分析有几行
②分析有几列
③如果有跨行跨列的情况存在,要注意删掉多余的内容
(5)网页中会用到的图片格式
<1>矢量图:放大缩小都不会失真(清晰度不变)
<2>位图:像素图(由像素点拼成)
P.S.
①Web优先使用PNG
②照片、色彩要求高的图片jpg
③web中的小动画gif
相关文章推荐
- <table>标签 利用DOM 的方法和属性实现对表格的动态操作
- <table>标签,制作表格
- HTML的<table>标签基础 - HTML 表格
- <table>表格标签
- HTML中的<table>标签及其子元素标签,JS中DOM对<table>的操作
- <学习html>第五天笔记-表格table(创建表格、表格属性、表头标签、表格结构、表格标题标签、合并单元格)
- 如何用<dl>标签做表格而不用table标签
- <table>中的<td>表示table data(表格数据),<tr>表示table row(表格行),<th>表示table head(表格头)
- HTML中<table>标签属性,1.水平对齐和2.垂直对齐。(表格)
- PHP 导出网页表格如何对<td>标签中的内容设置属性
- HTML中的<UL>标签中li横向排列
- <s:iterator>标签内使用<s:if>判断条件
- <a>超文本标签
- JSTL 标签<c: if> <c:choose>
- <img />标签 alt title
- JSF中的<h:selectBooleanCheckBox/>标签的监听事件
- c标签的<c:choose><c:when>
- <A>标签下载文件 IE浏览器
- <a></a>和<button></button>标签onclick事件嵌套传递参数
- <a>标签的不同状态