HTML表格与表单的认知与使用

1.用table标签创建一个基本表格

在table中使用tr表示表格中的一行,有几个tr就有几行。

在tr中使用td表示一个单元格,有几个td就有几个单元格。

colspan:横向的合并单元格
rowspan:纵向的合并单元格

例子:一个简单的融合col和row的表格。

<body>
<table border="1" width="50%" align="center">
<tr>
	<td>A1</td>
	<td>B1</td>
	<td>C1</td>
	<td>D1</td>
</tr>
<tr>
	<td>A2</td>
	<td>B2</td>
	<td>C2</td>
	<td> rowspan="2">D2</td>
</tr>

<tr>
	<td>A3</td>
	<td>B3</td>
	<td>C3</td>
</tr>
<tr>
	<td>A4</td>
	<td>B4</td>
	<td colspan="2">C4</td>
	
</tr>

效果图:

 

2.建立一个长表格
可以将一个表格分成三个部分:
    头部 thead
    主题tbody
    底部ftoot

    th 表示头部的单元格
例子:

<body>
	<table border="1" width='50%' align="center">
	<thead>
		<tr>
		<th>日期</th>
		<th>收入</th>
		<th>支出</th>
		<th>合计</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td>2000.1.1</td>
		<td>500</td>
		<td>200</td>
		<td>300</td>
	</tr>
	<tr>
		<td>2000.1.1</td>
		<td>500</td>
		<td>200</td>
		<td>300</td>
	</tr>
	<tr>
		<td>2000.1.1</td>
		<td>500</td>
		<td>200</td>
		<td>300</td>
	</tr>
	<tr>
		<td>2000.1.1</td>
		<td>500</td>
		<td>200</td>
		<td>300</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
		<td></td>
		<td></td>
		<td>合计</td>
		<td>300</td>
	</tr>
	</tfoot>
	</table>
</body>
	

结果图

3.表格的样式设置

boder-spacing:指定边框之间的距离 
border-collapse:设置边框的合并

如何设置隔行变颜色,单数行tr变颜色,基数行不变。

伪类选择器:nt-child 选中第N个元素 ,nt-child(2n)即是偶数,nt-child(2n+1)即是基数。
或者通过nth-child(odd)

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值