HTML表格的运用

  表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码如下:

<table border="1">
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>
        <td>row2,cell2</td>
    </tr>
</table>

1.表格标签:

<caption> 定义表格标题         
<col> 为表格的列定义属性
<colgroup> 定义表格的列的分组
<table> 定义表格
<td> 定义一个单元格
<tfoot> 定义表格的标注(底部)
<th> 定义表格的表头
<tbody 定义表格主体
<thead> 定义表格的表头
<tr> 定义表格的行
<table>
    <caption>这里是标题</caption>
    <colgrounp span="1" style="background:#DEDEDE;"/>/*这里控制第一列*/
    <colgrounp span="2" style="background:#EFEFEF;"/>/*这里控制第二列*/
    
    <!-- Table Header-->
    <thead>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
        </tr>
    </thead>

    <!--Table Footer-->
    <tfoot>
        <tr>
            <td>foot1</td>
            <td>foot1</td>
            <td>foot1</td>
        </tr>
    </tfoot>

    <!--Table Body-->
    <tbody>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody>

</table>

(注意:通常很少使用<thead>,<tbody>,<tfoot>标签,因为浏览器对它们的支持不好。)

2.表格属性:

border 此属性定义表格的边框
cellspacing 单元格间距
cellpadding 边框与内容之间的空白
width 表格的宽度
height 表格的高度
bgcolor 表格的背景色
background 表格的背景图
bordercolor 表格的边框颜色
bordercolorlight 亮边框颜色,border值不为零设置此值有效
bordercolordark 暗边框颜色,border值不为零设置此值有效
align 表格的对齐方式,值有left,center,right
valign 表格的垂直对齐方式,值有top(顶部对其)
middle(居中,默认)、bottom(底部对齐)
colspan(在<td>写) 合并列单元格,值为要合并的列数
rowspan(在<td>写) 合并方单元格,值为要合并的列数

合并单元格代码如下:

<!--跨两列的表格-->
<table border="1">
    <tr>
        <td>姓名</td>
        <td colspan="2">电话</td>
    </tr>
    <tr>
        <td>木木</td>
        <td>520</td>
        <td>748</td>
    </tr>
</table>

<!--跨两行的表格-->
<table border="1">
    <tr>
        <td>姓名</td>
        <td>木木</td>
    </tr>
    <tr>
        <td rowspan="2">电话</td>
        <td>520</td>
    </tr>
    <tr>
        <td>748</td>
    </tr>

(未完待续...)

 

原文地址:https://www.cnblogs.com/lzh739887959/p/5740177.html