HTML基础——表格的应用

2021-05-13 04:27

阅读：534

标签：单元格 htm 表头 utf-8 hsi mil har 蓝色 cell

一、表格标签

1、基本格式：

　　每个表格由 table 标签开始。
　　每个表格行由 tr 标签开始。
　　每个表格数据由 td 标签开始。

例如：

html>
    head>
        title>表格标签title>
        meta charset="utf-8"/>
    head>
    
    body>
        table border="1">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

表格标题：

标签：

表格表头：

标签

例如：

html>
    head>
        title>表格标签title>
        meta charset="utf-8"/>
    head>
    
    body>
        table border="1">
        caption>一个表格caption>
            tr>th>1-1th>td>1-2td>td>1-3td>tr>
            tr>th>2-1th>td>2-2td>td>2-3td>tr>
            tr>th>3-1th>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

2、属性：

width:表格宽度
height:表格高度
border:边框
cellspacing:是表格里单元格之间的距离
cellpadding:表格里单元格内的空白部分
align:表格水平位置
summary:规定表格的摘要
bgcolor:规定表格的背景颜色(不赞成使用)
align:
	规定表格现象对周围元素的对齐方式。
值：left	 center  righnt();

的属性：
*colspan="列数"
*rowspan="行数"

例1(表格边框)：
 

html>
    head>
        title>设置表格边框title>
        meta charset="utf-8"/>
    head>
    
    body>
        h4>表格边框属性：设置无边框h4>
        table>
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>表格边框属性：设置为border="1"h4>
        table border="1">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>表格边框属性：设置为border="8"h4>
        table border="8">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

 
例2(跨行跨列表格)：
 

html>
    head>
        title>表格标签title>
        meta charset="utf-8"/>
    head>
    
    body>
        table border="1">
        caption>一个表格caption>
            
            tr>td rowspan="2">1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-2td>td>2-3td>tr>
            
            tr>td colspan="2">3-1td>td>3-3td>tr>
        table>
    body>
html>

例3(设置单元格间距):

html>
    head>
        title>设置单元格间距title>
        meta charset="utf-8"/>
    head>
    
    body>
        h4>单元格无间距h4>
        table border="1">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>单元格间距为8h4>
        table border="1" cellspacing="8"/>
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

例4(单元格的边距):

html>
    head>
        title>设置单元格边距title>
        meta charset="utf-8"/>
    head>
    
    body>
        h4>默认单元格边距h4>
        table border="1">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>单元格边距为设置8h4>
        table border="1" cellpadding="8"/>
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

例4(为单元格添加背景颜色或者背景图像):

html>
    head>
        title>添加单元格背景title>
        meta charset="utf-8"/>
    head>
    
    body>
        h4>背景设置为红色h4>
        table border="1" bgcolor="red">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>背景设置为蓝色h4>
        table border="1" bgcolor="blue"/>
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        h4>为表格单元添加背景颜色h4>
        table border="1" bgcolor="blue"/>
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

例5(对齐方式):

html>
    head>
        title>表格的对齐方式title>
        meta charset="utf-8"/>
    head>
    
    body>
         table width="400" border="1">
             tr>
                 th align="left">商品th>
                 th align="right">原价th>
                 th align="right">现价th>
             tr>        
             tr>
                 td align="left">衣服td>
                 td align="right">$241.10td>
                 td align="right">$50.20td>
             tr>
             tr>
                 td align="left">围巾td>
                 td align="right">$30.00td>
                 td align="right">$44.45td>
             tr>
             tr>
                 td align="left">裤子td>
                 td align="right">$730.40td>
                 td align="right">$650.00td>
             tr>
             tr>
                 th align="left">总和th>
                 th align="right">$1001.50th>
                 th align="right">$744.65th>
             tr>
         table>
    body>
html>

例6(表格frame属性——配置边框是否可见)：

html>
    head>
        title>表格frame属性title>
        meta charset="utf-8"/>
    head>
    
    body>
        
        p style="color:blue">strong>frame="box":strong>p>
        table frame="box">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        p style="color:blue">strong>frame="above":strong>p>
        table frame="above">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        p style="color:blue">strong>frame="below":strong>p>
        table frame="below">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        p style="color:blue">strong>frame="hsides":strong>p>
        table frame="hsides">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
        
        p style="color:blue">strong>frame="vsides":strong>p>
        table frame="vsides">
            tr>td>1-1td>td>1-2td>td>1-3td>tr>
            tr>td>2-1td>td>2-2td>td>2-3td>tr>
            tr>td>3-1td>td>3-2td>td>3-3td>tr>
        table>
    body>
html>

3.thead、tbody、tfoot
表格一般分为三部分：

thead：表格的头，用来存放标题之类的内容。
tbody：表格的身体，用来存放数据本体内容。
tfoot：表格的脚，用来存放表格的脚注之类的内容。

　　在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。
　　一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。
 
HTML基础——表格的应用
标签：单元格   htm   表头   utf-8   hsi   mil   har   蓝色   cell   
原文地址：https://www.cnblogs.com/dfif/p/12002900.html

上一篇：libcurl-http发送数据流程

下一篇：JSON在线解析及格式化校验工具 jsonin.com

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML基础——表格的应用
文章链接：http://soscw.com/index.php/essay/84973.html

亲，登录后才可以留言！

HTML基础——表格的应用

一、表格标签

评论

热门文章

推荐文章

最新文章

置顶文章