【HTML】表格的基本结构和相关属性属性

表格的基本结构

table：表格标签
tr:代表每一行，行标签
td:代表每一格，列标签
th:代表每一格，内容会自动居中，字体自动加粗
boder：代表表格边框大小
cellpadding：表格与外层边框的间距
cellspacing:表格与表格之间的间距
caption:表格标题

代码示例：

<table border="1" cellpadding="0" cellspacing="0">
	<caption>学员成绩</caption>
	<tr>
		<th>姓名</th>
		<th>学号</th>
		<th>专业</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>20010204</td>
		<td>计算机科学与技术</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>20010203</td>
		<td>数据科学</td>
	</tr>
	<tr>
		<td>麻子</td>
		<td>20010205</td>
		<td>通信工程</td>
	</tr>
</table>

运行结果： 

表格的跨行和跨列

rowspan跨行

代码示例：

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="2">表格1</td>
		<td>表格2</td>
		<td rowspan="2">表格3</td>
	</tr>
	<tr>
		<td>表格2</td>
	</tr>
</table>

运行结果： 

colspan跨列

代码示例：

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="2">表格1</td>
		<td>表格2</td>
		<td rowspan="2">表格3</td>
	</tr>
	<tr>
		<td>表格2</td>
	</tr>
	<tr>
		<td colspan="2">表格2</td>
        <td>表格3</td>
	</tr>
</table>

运算结果： 

 表格的相关属性

table：表格标签
tr:代表每一行，行标签
td:代表每一格，列标签 th:代表每一格，内容会自动居中，字体自动加粗
boder：代表表格边框大小
cellpadding：表格与外层边框的间距
cellspacing:表格与表格之间的间距
caption:表格标题
width,height：宽高，可以作用在table、tr、td
bordercolor：边框颜色，只能作用在table上
bgcolor：背景颜色，作用在table、tr、td
align：水平对齐方式，作用在table、tr、td
         center:居中对齐
         left:左对齐
         right:右对齐
valign：垂直对齐方式，作用在tr、td上
          middle:居中对齐
          top:居上对齐
          bottom:居下对齐
border:控制最外层边框
rules:控制每一格边框
        rows:控制单元格上下边框显示
        cols:控制单元格左右边框显示
        none:控制单元格四周边框不显示
        all:控制单元格四周边框都显示，不写默认all

代码示例：

<table rules="all" border="1" align="center" bgcolor="yellow" bordercolor="" width="300" height="300" cellpadding="0" cellspacing="0">
    <tr align="right" bgcolor="grey">
		<td bgcolor="leftwards">表格1</td>
		<td align="center">表格2</td>
		<td>表格3</td>
	</tr>
	<tr>
		<td>表格1</td>
		<td valign="top">表格2</td>
		<td valign="bottom">表格3</td>
	</tr>
	<tr>
		<td>表格1</td>
		<td bgcolor="wathet">表格2</td>
		<td>表格3</td>
	</tr>
</table>