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

35次阅读

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

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
2020-12-31
 0
关于html:input纯数字框
关于html:React笔记事件处理
关于html:eltablecolumn日期格式化
关于html:CSS垂直居中