HTML-表格的使用标签

最新推荐文章于 2024-10-18 14:58:16 发布

小熊哦呜

最新推荐文章于 2024-10-18 14:58:16 发布

阅读量40

点赞数

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_70812512/article/details/134917946

版权

本文详细介绍了如何在网页中使用HTML标签如<table>,<td>,<tr>创建数据表格，以及如何通过CSS设置边框、宽度、对齐和颜色，包括caption、thead、tbody和tfoot的使用方法。

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

在网页中我们要种出像ex里面的类似的数据表格，那么就需要下面的标签

我们看到在里面有一个border的表格单词，这个单词就是用来设置网页的边框线的

那么怎么在代码中实现的呢，格式是什么呢

如下

<table border="1" width="80%" align="center">
           <tr>
               
               <td>手机充值，lp卡</td>
               <td align="center" colspan="3">办公设备，文具，耗材</td>
           </tr>


           <tr>
               
               <td align="center" rowspan="4">各种卡的总汇</td>
               <td>铅笔</td>
               <td>彩笔</td>
               <td>粉笔</td>
           </tr>

           <tr>
               
               <td>打印</td>
               <td>刻录</td>
               <td>墨盒</td>
           </tr>

           <tr>
               
               <td>笔记</td>
               <td>钢笔</td>
               <td>墨水</td>
           </tr>

       </table>

拿表1来说，我们可以看到代码中有一个<table border="1" width="80%" align="center">，里面的border="1"就是用来设置网格线的width="80%" align="center"一个是设置网格的布局大小，一个是让网格布局居中， colspan="3"是合并例，可以看到在合并例后-办公设备，文具，耗材-就占了3例，align="center"是合并行， <tr> <td></td> </tr> ///“<tr>”就是你的行，你设置了多少个tr就有多条行，td是你表格中要填的数据，这就是一基本的网页表格组成和排版

网页中还有一个示例，如下

像这种表格外有居中的文字，表格里面的上部分加粗和颜色的调节怎么处理呢

如下：

<table width="100%" border="1" >
			<caption>年度数据报表</caption>
			<tr>
				<thead style="background-color:aqua ;">
				<th>    </th>
				<th>1月</th>
				<th>2月</th>
				<th>3月</th>
				<th>小计(RMB)</th>
			</tr>
			</thead>
			
			<tbody style="background-color: cadetblue;">
				
		
			<tr>
				<td>北京</td>
				<td>10</td>
				<td>10</td>
				<td>50</td>
				<td>70</td>
			</tr>
			
			<tr>
				<td>上海</td>
				<td>20</td>
				<td>30</td>
				<td>70</td>
				<td>120</td>
			</tr>
			
			<tr>
				<td>天津</td>
				<td>30</td>
				<td>40</td>
				<td>80</td>
				<td>150</td>
			</tr>
			</tbody>

			<tfoot style="background-color: gold;">
				
			
			<tr>
				<td>总计(RMB)</td>
				<td>60</td>
				<td>80</td>
				<td>200</td>
				<td>240</td>
			</tr>
			</tfoot>
			
			
			
		</table>

可以看到，在代码中我们设置了一个<caption>年度数据报表</caption>用在表格外的一个文字显示，<thead style="background-color:aqua ;">为头部，头部加粗居中， style是设置表格的颜色，

<tbody style="background-color: cadetblue;">为身体，<tfoot style="background-color: gold;">为脚哈哈哈，今天就分享到这里啦