用html和css写表格(table)

表格

1.表格的结构

<table>
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<td>13</td>
				<td>14</td>
			</tr>
		</table>

2.表格的属性

1.table属性

• border=“1” 设置边框宽度
• bordercolor=“purple” 边框颜色
• width=“200” 设置表格宽
• height=“200” 设置表格高
• bgcolor=“pink” 设置背景颜色
• align=“center” left/center/right 设置表格本身的水平对齐方式
• cellpadding=“10” 设置单元格内边距，边框到内容之间的距离
• cellspacing=“20” 设置单元格外边距，边框与边框之间的距离

2.tr属性

• align 设置内部文本的水平对齐方式
• valign=“bottom” top/middle（默认值）/ bottom 设置内部文本的垂直对齐方式
• bgcolor 设置当前行的背景颜色

3.td属性

• align 设置内部文本的水平对齐方式
• valign=“bottom” top/middle（默认值）/ bottom 设置内部文本的垂直对齐方式
• width
• height 避免让td的尺寸和 table的尺寸发生冲突
• bgcolor
• colspan 跨列合并单元格
• rowspan 跨行合并单元格

3.表格是一种特殊的显示方式

• ①表格中，每一行的列数相同
• ②每一行，所有列的高度相同
• ③每一行，相同的那一列，宽度相同
• ④表格中列，会根据内容多少，而自动匹配尺寸
• 内容少，设置的尺寸大，听尺寸的
• 内容多，设置的尺寸小，按内容适应
• table使用了一种完全不同的特殊的渲染方式
• 把表格中所有的数据读取的内存中
• 再一次性把表格渲染到页面上
• 表格的渲染效果非常低下

4.不规则的表格

列合并

• td的属性colspan=“n”
• 从当前单元格向右合并n个单元格(n包含自己本身)
• 被合并的单元格，要删除

行合并

• td的属性rowspan=“n”
• 从当前单元格向下合并n个单元格(n包含自己本身)
• 被合并的单元格，要删除

练习：
三乘三的表格 300宽高

<table border="1" width="300" height="300">
		<tr>
			<td colspan="2"></td>
			<!-- <td></td> -->
			<td rowspan="2"></td>
		</tr>
		<tr>
			<td rowspan="2"></td>
			<td></td>
			<!-- <td ></td> -->
		</tr>
		<tr>
			<!-- <td></td> -->
			<td colspan="2"></td>
			<!-- <td></td> -->
		</tr>
	</table>

附加知识点:

• 浏览器对于一个完整的单词，不会自动换行， 会把连在一起的字符（中间没有空格） 断定为一个完整的单词

5.表格的复杂应用

表格的可选标记

<caption>表格的标题</caption> 必须紧紧挨着table的开始标签
<th></th> 行/列标题  替代<td></td>

• th的效果为剧中，加粗

行分组

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

• 但是，如果表格中没有行分组，浏览器会默认添加 表格的嵌套
• 表格中，可以嵌套其他元素，甚至可以嵌套小表格
• 但是，不管嵌套什么元素，都只能放在或者中