HTML表格设计与样式-优快云博客

本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/104955757

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：隐藏；
表格的写法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.table1{
				width:300px;
				height:300px;
				border-collapse:collapse;
				border:0px solid #000000;
				margin: 50px;
				float: left;
			}
			td{
			  border:solid 1px #000000;
			}
				.table2{
					width:300px;
					height:300px;
					border-collapse:collapse;
					border:5px solid #000000;
					margin: 50px;
					float: left;
			}
			.table3{
					width:300px;
					height:300px;
					border-collapse:collapse;
					border:5px double #000000;
					margin: 50px;
					float: left;
			}
			.table4{
					width:300px;
					height:300px;
					border-spacing: 5px;
					margin: 50px;
					float: left;
			}
			.table5{
					width:300px;
					height:300px;
					border-collapse:collapse;
					margin: 50px;
					float: left;
			}
			th{
				border-bottom: 1px solid;
			}
		</style>
		
	</head>
	<body>
		<table class="table1">
		<caption>1-细线表格</caption>
		<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</tbody>
	</table>
	<br>
	<table class="table2">
		<caption>2-粗线表格</caption>
		<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		</tbody>
		<table class="table3">
			<caption>3-双线表格</caption>
			<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			</tbody>
			
			
			<table class="table4">
				<caption>4-宫字格</caption>
				<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
					<td>9</td>
				</tr>
				</tbody>
				
				<table class="table5">
					<caption>-单线表格</caption>
					<tbody>
					<tr >
						<th >1</th>
						<th >1</th>
						<th >1</th>
					</tr>
					<tr>
						<th >1</th>
					    <th >1</th>
						<th >1</th>
					</tr>
					<tr>
						<th >1</th>
						<th >1</th>
						<th >1</th>
					</tr>
					</tbody>
	</table>
	</body>
</html>

无内容时单元格的设置：empty-cells:show/hide;的应用如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            .tab1{
                width:500px;
                height:300px;
                border:5px solid #000;
                empty-cells:hide;
            }
            td{
                background:skyblue;
            }
             
             
        </style>
    </head>
    <body>
        <table class="tab1">
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
            </tr>
            <tr>
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

一些表格制作的应用方法