表格样式

表格默认样式

Hbuilder 创建表格小技巧 tr > td{$}*5

<table border="1" width="500" height="200" rules="groups">
		<thead>
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		</tbody>
		<tfoot>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		</tfoot>
	</table>

<!--
		一个完整的表格组成：
		table
		tr
		th 表格的表头标题
		td
		
		行分组：
		thead 表头
		tbody 标体 注意点：tbody不设置的时候，浏览器会默认设置
		tfoot 表尾
		行分组可以让表格的结构更加清晰合理
	-->

cellspacing

表格的边框比较粗

<table border="1" width="500" rules="" cellspacing="0">

rules

表格的边框比较细

table border="1" width="500" height="200" rules="all"></table>

<table border="1" width="500" height="200" rules="cols"></table>

<table border="1" width="500" height="200" rules="rows"></table>

<table border="1" width="500" height="200" rules="groups"></table>

列分组

<colgroup span="2" style="background-color: yellow;"></colgroup>

<col span="2" style="background-color: #FF0000;" />

caption 标题属性

border-spacing 表格间隙

margin：50px auto; 表格居中

border-collapse: collapse; 合并单元格边框

text-align: 表格文字居中

table-layout:fix 表格固定 数字和字母在页面中不能默认换行，中文会换行

colspan="3" 合并单元格

rowspan="3"合并行

empty-cells: hide 无内容时隐藏

表格样式

原文：https://www.cnblogs.com/sehnen/p/14827042.html