HTML基础___表格 <第六天>
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://iixox.blog.51cto.com/184537/31011 |
学习内容:
1.建立表格_table_tr_td_caption_th
2.设置表格基本属性_width_height_align
3.表格的边框__border_bordercolor_cellspacing_cellpadding
4.设定表格的背景_bgcolor_background
5.修改表格的行属性_height_align_valign_bgcolor_background_bordercolor
6.调整单元格属性_width_heigth_colspan_rowspan_align_valign
7.表格的结构_thead_tbody_tfoot
8.层标记____div
1.建立表格
添加表格___table.__.tr.__td
语法:
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
..........................
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
............................
</tr>
................
</table>
<table>表格的开始,<tr>行标记,一行的开始 <td> 单元格标记,一个单元格的开始
设置表格的标题____caption
语法:<caption>表格的标题</caption>
表格的表头____th
表格的表头与<td>标记用法相同,但清头的内容是加粗显示的
语法:
<table>
<tr>
<th>单元格内的文字</th>
<th>单元格内的文字</th>
..........................
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
............................
</tr>
................
</table>
2.设置表格基本属性
表格的宽度___width
语法:<table width=表格的宽度> 值可以是像素值也可是百分比
表格的高度___height
语法:<table heiht=表格的高度> 值可以是像素值也可是百分比
表格的对齐方式___align
语法:<table align="表格的对齐方式"> left center right
3.表格的边框 ___border
语法:<table border=边框宽度> 单位为像素值.为0时不可见
表格的边框颜色___bordercolor
语法:<table border=边框宽度 bordercolor="边框颜色代码">
内框宽度______cellspacing
语法:<table cellspacing=内框宽度> 像素值
表格内文字与边框距离____cellpadding
语法:<table cellpadding=文字与边框的距离值>像素值
4.设定表格的背景____background
语法:<table background="背景图片的地址"> 可设颜色也可设图像
5.修改表格的行属性___height__bordercolor__bgcolor__background___align__valign
高度控制___height
语法:<tr height=表格中行高度>
边框颜色___bordercolor
语法:<tr bordercolor="颜色代码">
行背影____bgcolor background
语法:<tr bgcolor="颜色代码">
<tr background="图像地址">
行文字的水平对齐方式____align
语法:<tr align="水平对齐方式">left right center
行文字的垂直对齐方式____valign
语法:<tr valign="垂直对齐方式">top middle bottom
设置表格标题的对齐方式_____valign____align
语法:<caption valign="垂直对齐方式" align="水平对齐方式">表格的标题</cation>
6.调整单元格属性
单元格的大小___width height
语法:<td width=单元格的宽度 height=单元格的高度>
水平跨度____colspan
语法:<td colspan=水平跨的列数>
单元格向右打通的单元格的个数
垂直跨度____rowspan
语法:<td rowpan=垂直跨的行数>
对齐方式___align valign
语法:<td align="水平对齐方式" valign="垂直对齐方式">
单元格的背景色___bgcolor
语法:<td bgcolor="颜色代码">
单元格的边框颜色__bordercolor
语法:<td bordercolor="颜色代码">
单元格的亮边框_____bordercolorlight
语法:<td bordercolorlight="颜色代码">边框的向光部分
单元格的暗边框_____bordercolordark
语法:<td bordercolordark="颜色代码">边框的背光部分
单元的背景图像_____background
语法:<td background="背景图片的地址">
文字内容不换行_____nowrap
语法<th nowrap> <td nowrap>
7.表格的结构
设计表头样式_____thead
语法:<thead bgcolor="颜色代码" align="对齐方式" valign="垂直对齐方式">
...........
</thead>
说明:在<thead>标记中可包含<td><th><tr>而一个表中只能有一个<thead>标记
设计表主体样式_____tbody
语法:<tbody bgcolor="颜色代码" align="对齐方式" valign="垂直对齐方式">
.................
</tbody>
说明:功能和<thead>一样.统一设计表主体部分的样式,一个表中只能有一个<tbody>标记
设计表尾样式______tfoot
语法:<tfoot bgcolor="颜色代码" align="对齐方式" valign="垂直对齐方式">
................
</tfoot>
说明:一个表中只能有一个<tfoot>标记
8.层标记____div
语法:<div id=值 align=对齐方式 style=样式 class=应用的样式类></div>
说明:id用来标识层; align用来设定层内元素的对齐方式,
style用来设定层的属性,包括层的大小范围和起始位置;
class用于定义层所应用的css样式
div常和css样式表结合使用..
本文出自 “Persist Persist Insists” 博客，请务必保留此出处http://iixox.blog.51cto.com/184537/31011 本文出自 51CTO.COM技术博客 |
ixox
博客统计信息
热门文章
最新评论
友情链接