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

2次阅读

共计 5797 个字符，预计需要花费 15 分钟才能阅读完成。

由 <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> 的属性标签;

标示一个表格,

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

两头;

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>

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>

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>