（二）HTML绘制基本表格（学习笔记）

最新推荐文章于 2024-02-16 23:45:17 发布

原创最新推荐文章于 2024-02-16 23:45:17 发布 · 444 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

这篇学习笔记介绍了HTML绘制表格的基本方法，包括设置表格属性如border、width、align等，以及如何进行跨行(rowspan)和跨列(colspan)的单元格合并。通过caption、thead、tbody和tfoot构建完整的表格结构。

一、绘制基本表格

table主要用于呈现格式化数据。表格是由行和列组成。
格式：

<table>/*表示一个表格，可能有多行多列*/
	 <tr>    /*代表行*/
	    <td></td>   /*代表每行被分割为若干单元格*/
		<td></td>    
		.........
	 </tr>
        . . . .
</table>

表格属性：
border：设置表格边框，默认单位是像素
width：设置表格的宽度
align：设置表格对齐位置（left（默认）/center/right）
cellpadding：单元格文本与边框之间的距离（上下左）
cellspacing：单元格边框间距

用法：

/*用Emmet语法： table>tr*2>td{内容$}*3 + tab键  能快速打出，其中$是从1往后编号*/
<table border="1" width="400" cellpadding="0" cellspacing="10" align="center">
    <tr>
         <th>内容1</th>     /* 按住alt可以操作多行*/
        <th>内容2</th>     /* <th></th> 表示表头，主要对下面的内容起说明作用，th的内容会自动加粗和居中显示*/
        <th>内容3</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
</table>

二、表格中的跨行和跨列

跨行和跨列属性主要用来绘制复杂表格。
      rowspan：跨行
      colspan：跨列

(1)rowspan：合并行
首先建一个表格

/*Emmet语法：table[border=1 with=500 aligin=center]>tr*3>td{内容区$}*3*/
<table border="1" with="500" aligin="center">
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
</table>

之后合并

<table border="1" with="500" aligin="center">
    <tr>
        <td rowspan="2" align="center" valign="middle">内容区1</td>/*合并第一行第一个和第二行第一个单元格*/
		/*valign:垂直对齐（top/middle/bottom）*/
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
      /*  <td>内容区1</td>  就要删除*/
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr align="center">
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
</table>

在这里插入图片描述
(2)colspan:合并列
先做出表格

/*Emmet语法：table[border=1 with=500 aligin=center]>tr*3>td{内容区$}*3*/
<table border="1" with="500" aligin="center">
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
</table>

再合并单元格

<table border="1" with="500" aligin="center">
    <tr>
        <td>内容区1</td>
        <td colspan="2" align="center">内容区2</td>
       /* <td>内容区3</td>删除掉*/
    </tr>
    <tr>
        <td>内容区1</td>
        <td>内容区2</td>
        <td>内容区3</td>
    </tr>
    <tr>
        <td colspan="3" align="left">内容区1</td>
         /* <td>内容区2</td>删除掉*/
         /* <td>内容区3</td>删除掉*/
    </tr>
</table>

在这里插入图片描述

三、绘制一张完整表格：

caption（标题）、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。

/*table[border=1 width=600 align=center]>(caption{学生信息表})+(thead>tr>td*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=4])*/
<table border="1" width="600" align="center">
    <caption>学生信息表</caption>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>家庭住址</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center">
        <td>001</td>
        <td>张三</td>
        <td>aaaaaa</td>
        <td>kkk</td>
    </tr>
    <tr align="center">
        <td>002</td>
        <td>李四</td>
        <td>bbbb</td>
        <td></td>
    </tr>
    <tr align="center">
        <td>003</td>
        <td>小明*</td>
        <td>cccc</td>
        <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">附注：*为优秀</td>
    </tr>
    </tfoot>
</table>