关于html:html标签之表格标签

HTML表格组成:

由<table>标签以及一个或多个<tr>、<th>或<td>标签：

<table> 标签：用来定义表格，整个表格蕴含在<table></table>标签中；
<tr>标签：用来定义表格中一个行，它是单元格的容器，每行能够蕴含有多个单元格，由<tr></tr>标签示意；
<td>标签和<th>标签：用来定义单元格，所有单元格都在<th>标签内，每个单元格由一对<td></td>标签或一对<th></th>标签示意，具体的表格内容搁置在这一对<td>标签或<th>标签之中，其中th标签中的内容默认以粗体、居中的形式显示。

其语法如下：

<table>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

是

的下层标签;

<tr>必须在一个<table></table>外面,它不能独自应用,相当于<table>的属性标签;

标示一个表格,

标示这个表格两头的一个行，

两头;

table标签属性:

1）border标签属性：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格增加宽度为1px的边框；
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>border标签属性</title>    
    <style>
        table{                
            border: 15px solid #000;
        }
        th,td{                
            border: 1px solid #000;
        }            
    </style>
    </head>
    <body>        
        <table >
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

2）width标签属性：设定表格的宽度；不倡议通过width标签属性设置表格宽度，倡议向table标签增加width款式属性进行设置。

px :设置以像素计的宽度（例：width=”100px”）
%：设置以蕴含元素的百分比计的宽度（例：width=”100%”）

例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>width标签属性</title>    
    <style>
        table{                
            width:"80%"；
        }
    </style>
    </head>
    <body>        
        <table  border="15px">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

3）align标签属性：指定表格绝对于四周标签的对齐形式,倡议向table标签增加款式属性进行设置;
属性值：

left：左对齐表格
right：右对齐表格
center：居中对齐表格

（1）通过float款式属性实现左右对齐；

left：元素向左浮动
right：元素向右浮动
none：默认值，元素不浮动
inherit：规定应该从父元素继承float属性的值

（2）通过margin款式属性实现居中对齐；

margin:0 auto;

例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>align标签属性</title>    
    <style>
        table{                
            margin: 0 auto；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width="80%">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

4）cellspacing 标签属性：设定单元格之间的间距（单位：px）,倡议向table标签增加border-spacing款式属性进行设置;
例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>cellspacing标签属性</title>    
    <style>
        table{                
            border-spacing: 0；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

5）cellpadding标签属性：设定单元边际与单元内容之间的间距（单位：px），倡议向td或th标签增加padding款式属性来实现；
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>cellspacing标签属性</title>    
    <style>
        table{                
            padding: 8px；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

6）bgcolor标签属性：设置表格背景色彩；

color_name：规定色彩值为色彩名称的背景色彩
hex_number：规定色彩值为十六进制的背景色彩
rgb_number：规定色彩值为rgb代码的背景色彩

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>bgcolor标签属性</title>    
    <style>
        table{                
            background-color: "red"；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

7）border-collapse款式属性：设置表格的边框是否被合并为一个繁多的边框；

separate:默认值，边框会被离开；
collapse:边框会合并为一个繁多的边框；
inherit:规定应该从父元素继承border-collapse属性的值；

例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>border-collapse款式属性</title>    
    <style>
        table{                
            font: 12px;/*字体大小*/
            padding:10px;/*单元格边框与内容之间的间距*/
            border: 1px solid #000;/*表格边框*/
        }
    </style>
    </head>
    <body>        
        <table style= border-collapse："collapse;">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

用标签属性实现一个表格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <style>
            table{                
                border: 1px solid black;
                width: 20%;    
                /*float:right;*/
                margin: 0 auto;
                border-spacing:0 ;
                background-color: red;
                border-collapse: collapse;
            }
            td{                
                border: 1px solid black;
                padding: 10px;
            }            
        </style>
    </head>
    <body>        
        <table >
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>                
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </table>
    </body>
</html>

<tr>标签属性：

1）align标签属性：设置表格行中单元格内容的程度对齐形式；

left：左对齐内容（默认值）
right：右对齐内容
center：居中对齐内容（th元素的默认值）
justify：对行进行舒展，这样每行都能够有相等的长度
char：将内容对准指定字符

2）valign标签属性：设置表格行中单元格内容的垂直对齐形式；

top：对内容进行上对齐
middle：对内容进行居中对齐（默认值）
bottom：对内容进行下对齐
baseline：与基线对齐

3）bgcolor标签属性：设定表格行的背景色彩

color_name：规定色彩值为色彩名称的背景色彩
hex_number：规定色彩值为十六进制的背景色彩
rgb_number：规定色彩值为rgb代码的背景色彩

例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    
            table{
                border: 1px solid black;
                width: 20%;    
                /*float:right;*/
                margin: 0 auto;
                border-spacing:0 ;
                background-color: red;
                border-collapse: collapse;
            }
            tr{
                height: 50px;
                text-align: center;
                vertical-align: top;
                background-color: salmon;                
            }
            td{        
                border: 1px solid black;
            }
            
        </style>
    </head>
    <body>
        <table >
            <tr valign="top">
                <td> 1 </td> <td> 1 </td> <td> 1 </td>            
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </table>
    </body>
</html>

<th>和<td>标签属性：

1）width标签属性与height标签属性：设定单元格的宽度和高度

pixels :设置以像素计的宽度（例：width=”100px”）
percent：设置以蕴含元素的百分比计的宽度（例：width=”100%”）

2）bgcolor标签属性：设定单元格背景色彩

color_name：规定色彩值为色彩名称的背景色彩
hex_number：规定色彩值为十六进制的背景色彩
rgb_number：规定色彩值为rgb代码的背景色彩

3）align标签属性：设置单元格内容的程度对齐形式

left：左对齐内容（默认值）
right：右对齐内容
center：居中对齐内容（th元素的默认值）
justify：对行进行舒展，这样每行都能够有相等的长度
char：将内容对准指定字符

4）valign标签属性：设置单元格内容的垂直对齐形式

top：对内容进行上对齐
middle：对内容进行居中对齐（默认值）
bottom：对内容进行下对齐
baseline：与基线对齐

5）colspan款式属性：设置单元格横跨多少列
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>colspan标签属性</title>    
    <style>
        #title {                
            text-align: center；
            font-weight: bold;
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                    <td colspan="3" id="title"></td>
            </tr>
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 性别</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

6）rowspan款式属性：设置单元格横跨多少行
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>rowspan标签属性</title>    
    </head>
    <body>        
        <table  border="15px"  width= "30%" cellspacing="0">
            <tr>
                 <td colspan="4" style="text-align: center;">上午</td>
                 <td>语文</td>
            </tr>
            <tr>
                <td> 化学</td>     
            </tr>
            <tr>
                <td> 历史</td>     
            </tr>
            <tr>
                <td> 政治</td>     
            </tr>
        </table>
    </body>
</html>

7）nowrap标签属性：设定单元格的内容是否换行
应用table表的常识实现如下操作：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>nowrap标签属性</title>    
    </head>
    <body>        
        <table  border="1px"  width= "100%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年龄</th>
                 <th> 地址</th>     
            </tr>
            <tr>
                <td> 张三</td>     
                <td> 19 </td>
                 <td nowrap="nowrap">北京市海淀区  </td>
            </tr>
        </table>
    </body>
</html>

、	标示行中的一个列,须要嵌套在

关于html:html标签之表格标签

HTML表格组成:

table标签属性:

<tr>标签属性：

<th>和<td>标签属性：

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于html:html标签之表格标签

HTML表格组成:

table标签属性:

<tr>标签属性：

<th>和<td>标签属性：

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复