Web小案例——表格实现

最新推荐文章于 2024-08-17 16:56:44 发布

codeLiuhy

最新推荐文章于 2024-08-17 16:56:44 发布

阅读量1.6k

点赞数 3

分类专栏： h5基础篇文章标签： html

本文链接：https://blog.csdn.net/qq_42000660/article/details/118445062

版权

h5基础篇专栏收录该内容

23 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML表格的构建，包括如何使用table、tr、td和th标签创建表格，展示了表格的边框、单元格间距、宽度设置等属性的用法，并通过案例解释了col标签用于设定列宽的方法。此外，还提到了内容对齐和表格样式调整的相关知识。

摘要由CSDN通过智能技术生成

一、绘制一个表格

1、代码实现结构：

table表示表格标签，tr表示行标签，td表示一个单元格,th表示表头的一个单元格（与td不同的是文字样式是加粗的）

<table>
    <tr>
        <th>表头</th>
    <tr>
    <tr>
        <td>单元格</td>
    <tr>
</table>

2、案例：

<table>
	<tr>
		<th>品种</th>
		<th>年龄</th>
		<th>颜色</th>
		<th>个数</th>
	</tr>
	<tr>
		<td>猫咪</td>
		<td>1</td>
		<td>白色</td>
		<td>2</td>
	</tr>
    <tr>
		<td>狗</td>
		<td>3</td>
		<td>黄色</td>
		<td>1</td>
	</tr>
</table>

效果图：

3、表格属性

1).border，给表格加边框，值为像素大小，表示边框的粗细，效果如下图所示：

<table border="1px">...</table>

2).cellspacing，设置表格单元格间距，单位也为像素px，效果如下图所示：

<table border="1px" cellspacing="0px">...</table>

<table border="1px" cellspacing="10px">...</table>

cellspacing为0px：cellspacing为10px：

3、td、th标签的width属性，设置单元格的宽度，效果如下：

<th width="100px">品种</th>

4、align属性，值为center时让内容居中，设置其他值也可以按照其他方式对齐，比如右对齐，设置align为right，详情请查看W3C教学网站的详细教程。

<tr align="center">....</tr>

效果：

5、col标签(单标签)，表示表格中的一列，比如设置第一列的宽度：

<table border="1" cellspacing="0px">
	<col width="100px">
	<tr align="center">
		<th>品种</th>
		<th>年龄</th>
		<th>颜色</th>
		<th>个数</th>
	</tr>
    <tr align="center">
		<td>猫咪</td>
		<td>1</td>
		<td>白色</td>
		<td>2</td>
	</tr>
	<tr align="center">
		<td>狗狗</td>
		<td>3</td>
		<td>黄色</td>
		<td>1</td>
	</tr>
</table>

效果：

如果设置第二列的宽度，可以再添加一个col标签，设置其width：

<table>
    <col width="200px">
    <col width="200px">
    <tr align="center">
		<th>品种</th>
		<th>年龄</th>
		<th>颜色</th>
		<th>个数</th>
	</tr>
    <tr>...</tr>
    .
    .
    .
</table>