HTML表格元素属性（附多种类型的表格）

表格元素

表格基础

table: 表格标签

			tr:	行
			td:	单元格
			
			border="设置边框"
			bordercolor="边框颜色"
			
			cellspacing="单元格边框与边框之间的距离"
			cellpadding="单元格与内容之间的距离"
			注意: 给table添加
			
			width="宽度"
			height="高度"
			
			colspan="合并列" 左右合并
			rowspan="合并行" 上下合并
			注意: 给td添加,合并几个,数字写几

			align="水平位置"
				left	在左边
				center	在中间
				right	在右边
			
			valign="垂直对齐方式"
				top	顶部对齐
				middle	居中(默认值)
				bottom	底部对齐

表格案例：

<table border="1" width="500" height="300" cellspacing="10" cellpadding="0" bordercolor="red" align="center"
        valign="top">
        <tr align="center">
            <td>1-1</td>
            <td>1-2</td>
            <td colspan="2">1-3</td>

        </tr>
        <tr>
            <td align="right">2-1</td>
            <td>2-2</td>
            <td valign="top">2-3</td>
            <td>2-4</td>
        </tr>
        <tr valign="top">
            <td>3-1</td>
            <td rowspan="2">3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
        <tr>
            <td>4-1</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>

    </table>

效果图：

表格补充

1 ： 数据行分组

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

2 ： 数据列分组

<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->

3 ： 列标题

<th></th>

4 : 表格标题

<caption></caption>

表格属性

1、单元格间距：border-spacing:value;

​ 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2、合并相邻单元格边框：border-collapse:separate/collapse;

​ 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3、无内容时单元格的设置：empty-cells:show/hide;

​ 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

几种类型表格

表格的公共属性：

        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 20px auto;
            width: 300px;
            height: 200px;
            border-collapse: collapse;
            text-align: center;
        }

细线表格

    <!-- 细线表格 -->
    <table class="tab1">
        <caption>
            细线表格
        </caption>
        <tbody>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
    </table>

.tab1 tbody tr td {
	border: 1px solid #000;
}

粗框细线表格

<table class="tab2">
        <caption>
            粗框细线表格
        </caption>
        <tbody>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
    </table>

.tab2 {
	border: 5px solid #000;
}

双线表格

<table class="tab3">
        <caption>
            双线表格
        </caption>
        <tbody>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
    </table>

.tab3 {
	border: 5px double #000;
}

.tab3 tbody tr td {
	border: 1px solid #000;
}

宫字格

<table class="tab4">
        <caption>
            宫字格
        </caption>
        <tbody>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
    </table>

.tab4{
	border-collapse: separate;
	border-spacing: 20px;
}

.tab4 tbody tr td {
	border: 1px solid #000;
}

单线表格

<table class="tab5">
            <caption>
                单线表格
            </caption>
            <tbody>
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                    <td>1-3</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                    <td>2-3</td>
                </tr>
                <tr>
                    <td>3-1</td>
                    <td>3-2</td>
                    <td>3-3</td>
                </tr>
            </tbody>
        </table>

.tab5 tbody tr td {
	border-bottom: 1px solid #000;
}

日历表格

<table class="tab6">
			<caption>
				日历表格
			</caption>
			<tbody>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>2-1</td>
					<td>2-2</td>
					<td>2-3</td>
				</tr>
				<tr>
					<td>3-1</td>
					<td>3-2</td>
					<td></td>
				</tr>
			</tbody>
		</table>

.tab6 {
	border: 5px solid #ccc;
	border-collapse: separate;
	border-spacing: 5px;
	/*隐藏无内容单元格*/
	empty-cells: hide;
	padding: 10px;
}

.tab6 tbody tr td {
	background-color: skyblue;
}