table表格标签
用于在HTML中生成一个二维表格,用于展示相应的信息:XXX管理系统、购物车等。
一、主要元素
table标签主要元素如下表格所示
table | 祖先元素,它有两个子元素,thead和tbody |
thead | 表头,它有一个子元素,th |
th | 表头内容 |
tbody | 表格主题(不可省略),有一个子元素,tr |
tr | 行,表格一般都是多行 |
td | 单元格 |
其中说到不可省略,说明有些是可以省略的哦,如caption(标题)、tfoot元素,一般都可以省略不写,也可以说用不到。
二、主要属性
1.border
添加在table起始标记中,不添加是默认为0,设置边框的粗细
<table border="5">
2.background&bgcolor
背景颜色或图片,可以添加在table起始标记中,也可以添加到其他标签起始标记中,改变一行、一个单元格的背景颜色或图片
<td bgcolor="red">
<tr background="图片路径">
3.colspan&rowspan
和并列和合并行,一般在th和td中使用
<th colspan="5">购物车</th>
<td colspan="3" rowspan="2">合计</td>
4.cellpadding&cellspacing
单元格边距和单元格间距
添加在table起始标记中控制整体的边距和间距
<table cellpadding="10" cellspacing="5">
5.align
文本在单元格中的对齐方式,在列或单个单元格中使用都可以
三、代码效果
<!-- 计算器样式 -->
<!-- 边框为1,后面附上无边框(=0)和粗边框(=5)效果 -->
<table border="1">
<thead>
<th colspan="4">计算器</th>
</thead>
<tbody>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td>mc</td>
<td>m+</td>
<td>m-</td>
<td>mr</td>
</tr>
<tr>
<td>C</td>
<td>/</td>
<td>*</td>
<td>delete</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>+</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">=</td>
</tr>
<tr>
<td>%</td>
<td>0</td>
<td>.</td>
</tr>
</tbody>
</table>
无边框时,哦,好丑哟,
border="5"
![](https://img2018.cnblogs.com/blog/1813730/201910/1813730-20191020230505552-1074043599.png)
加入个别颜色与背景
<!-- 购物车样式 -->
<table border="5">
<caption>购物车</caption>
<thead>
<th colspan="5">购物车</th>
</thead>
<tr bgcolor="red">
<td>行号</td>
<td>产品</td>
<td>单价</td>
<td>个数</td>
<td>小计</td>
</tr>
<tr>
<td>1</td>
<td bgcolor="red">Apple</td>
<td>¥10</td>
<td>1</td>
<td>¥10</td>
</tr>
<tr>
<td>2</td>
<td>Vivo</td>
<td>¥100</td>
<td>2</td>
<td>¥200</td>
</tr>
<tr>
<td>3</td>
<td>Xm</td>
<td>¥1000</td>
<td>¥3</td>
<td>¥3000</td>
</tr>
<tr>
<td>4</td>
<td>Hw</td>
<td>10000</td>
<td>¥4</td>
<td>¥40000</td>
</tr>
<tr>
<td colspan="3" rowspan="2" background="./img/huangguan.jpg">合计</td>
<td>运费</td>
<td>¥100</td>
</tr>
<tr>
<td colspan="2">¥43310</td>
</tr>
</table>
加入边距、间距,改变对齐方式
<!-- 购物车样式 -->
<table border="5" cellpadding="20" cellspacing="10">
<caption>购物车</caption>
<thead>
<th colspan="5">购物车</th>
</thead>
<tr bgcolor="red" align="right">
<td>行号</td>
<td>产品</td>
<td>单价</td>
<td>个数</td>
<td>小计</td>
</tr>
<tr align="right">
<td>1</td>
<td bgcolor="red">Apple</td>
<td>¥10</td>
<td>1</td>
<td>¥10</td>
</tr>
<tr>
<td>2</td>
<td>Vivo</td>
<td>¥100</td>
<td>2</td>
<td>¥200</td>
</tr>
<tr align="right">
<td>3</td>
<td>Xm</td>
<td>¥1000</td>
<td>¥3</td>
<td>¥3000</td>
</tr>
<tr>
<td>4</td>
<td align="right">Hw</td>
<td>10000</td>
<td>¥4</td>
<td>¥40000</td>
</tr>
<tr>
<td colspan="3" rowspan="2" background="./img/huangguan.jpg">合计</td>
<td>运费</td>
<td>¥100</td>
</tr>
<tr>
<td colspan="2">¥43310</td>
</tr>
</table>
四、总结
从上面可以看出,在添加了不同的样式过后表格的变化还是很大的,但是其实一般表格就是用来简单简洁的展示一些信息的,过于“花哨”,可能适得其反哦。
表格难点应该是关于和并列和合并行,我并没有拿来特别说,因为这个真的要多试几次才能好好理解,多练几次总是好的啦!
合并其中有一个问题不能解决,就是计算器中的空白区域,只能合并出来一行空白,代码当中写再多行合并也只有一行空白(反正我试了好多次,囧)。