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

最新推荐文章于 2024-07-25 11:52:08 发布

blackrock7

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量166

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_41507282/article/details/107147647

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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)

blackrock7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫

专栏目录