html标签之表格标签

html标签之表格标签_个人文章 - SegmentFault 思否

HTML表格组成:

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

其语法如下：

<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表格组成:

table标签属性:

<tr>标签属性：

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

Recommend

Intellij IDEA 教程合集

HTML表格标签

《深入理解计算机系统》实验五 —— Perfom Lab

《深入理解计算机系统》（CSAPP）读书笔记 —— 第五章优化程序性能

DIP 依赖倒置原则

《深入理解计算机系统》（CSAPP）实验四 —— Attack Lab

Windows x64 Registry Creating My Key on Wow6432node and Does Not Work Correctly

Insert a multidimensional array with MySQLI Prepared Statements?

CakePHP Translate Behavior with associated templates

How to store a text file in tables

About Joyk