您现在的位置是:首页 > 电脑 > 

html 简单表格制作(看了它足以应对大部分表格)

2025-07-20 19:31:56
        目录       基础表格 进阶表格 锦上添花表格 bgcolor  background align frame元素 基础表格 首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头,表身。 下面就是一个简单的表格。 表头就是黑体加粗的内容,表身就是表格主要表达的内容。 每个表格由 table 标签

 

     

目录

     

基础表格

进阶表格

锦上添花表格

bgcolor  background

align

frame元素


基础表格

首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头,表身。

下面就是一个简单的表格。

表头就是黑体加粗的内容,表身就是表格主要表达的内容。

每个表格由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格数据由 td 标签开始。如下图

<html lang=en>
<head>
	<meta charset=UTF-8>
	<title>Document</title>
</head>
<body>
  <table border=1>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>17</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>18</td>
    </tr>
  </table>

</body>
</html>

th就是我们的表头它会自动加粗加大居中

tr就是我们的行。

td就是我们的列。

border就是我们的边框

进阶表格

那么有的人就会说我看到的表格不是长这个样子的,是这个样的

里面没有单元格空隙,而且相对复杂。

其实我们只需要加入以下标签:cellpadding,cellspacing,colspan和rowspan即可

cellpadding是规定单元边沿与其内容之间的空白。
cellspacing是规定单元格之间的空白。
colspan 属性规定单元格可横跨的列数。                                                                                 rowspan 属性规定单元格可横跨的行数。(colspan与rowspan默认为1)

<html lang=en>
<head>
	<meta charset=UTF-8>
	<title>表格</title>
	<h1>工商银行电子汇款单</h1>
</head>
<body>
  <table border=1 width=100% height=100% cellspacing=0
  cellpadding=0>
  	<tr>
  		<th colspan=2>回单类型</th>
  		<th>网上转账汇款</th>
  		<th colspan=2>指令序号</th>
  		<th>656515466</th>
  	</tr>
  	<tr>
  		<td rowspan=4 align=left>收<br>款<br>人</td>
  		<td>卡户</td>
  		<td>张三</td>
  		<td rowspan=4>付<br>款<br>人</td>
  		<td>户名</td>
  		<td>老6</td>
  	</tr>
  	<tr>
     	<td>卡号</td>
  	  <td>005161155</td>
  	  <td>卡号</td>
     	<td>65455</td>
  	</tr>
  	<tr>
  		<td>地区</td>
  		<td>南京</td>
  		<td>地区</td>
  		<td>杭州</td>
  	</tr>
  	<tr>
  		<td>网点</td>
  		<td>工商江苏南京业务处理中心</td>
  		<td>网点</td>
  		<td>江苏徐州业务中心</td>
  	</tr>
  	<tr>
  		<td colspan=2>币种</td>
  		<td>人民币</td>
  		<td colspan=2>钞标准</td>
  		<td>钞票</td>
  	</tr>
  	<tr>
  		<td colspan=2>金额</td>
  		<td>1.00元</th>
  		<td colspan=2>手续费</td>
  		<td>0.75元</td>
  	</tr>
  	<tr>
  	  <td colspan=2>合计</td>
  		<td colspan=4>人民币(大写):壹</td>
  	</tr>
  	<tr>
  		<td colspan=2>交易时间</td>
  		<td>2021年</td>
  		<td colspan=2>时间戳</td>
  		<td>2021-06-04-1.00.00.0000</td>
  	</tr>
  </table>
	<p>票据打印时间:2021-06-04</p>
	<p><del>票据打印单位:xx银行</del></p>
    <p>操作员:默默
</body>
</html>

锦上添花表格

 

 

<html lang=en>
<head>
	<meta charset=UTF-8>
	<title>表格</title>
	
</head>
<body>

  <table border=1 width=100% height=100% cellspacing=0
  cellpadding=0>
  <caption>工商银行电子汇款单</caption>
  	<tr>
  		<th colspan=2>回单类型</th>
  		<th>网上转账汇款</th>
  		<th colspan=2>指令序号</th>
  		<th>656515466</th>
  	</tr>
  	<tr>
  		<td rowspan=4 align=left>收<br>款<br>人</td>
  		<td>卡户</td>
  		<td>张三</td>
  		<td rowspan=4>付<br>款<br>人</td>
  		<td>户名</td>
  		<td>老6</td>
  	</tr>
  	<tr>
     	<td>卡号</td>
  	  <td>005161155</td>
  	  <td>卡号</td>
     	<td>65455</td>
  	</tr>
  	<tr>
  		<td>地区</td>
  		<td>南京</td>
  		<td>地区</td>
  		<td>杭州</td>
  	</tr>
  	<tr>
  		<td>网点</td>
  		<td>工商江苏南京业务处理中心</td>
  		<td>网点</td>
  		<td>江苏徐州业务中心</td>
  	</tr>
  	<tr>
  		<td colspan=2>币种</td>
  		<td>人民币</td>
  		<td colspan=2>钞标准</td>
  		<td>钞票</td>
  	</tr>
  	<tr>
  		<td colspan=2>金额</td>
  		<td>1.00元</th>
  		<td colspan=2>手续费</td>
  		<td>0.75元</td>
  	</tr>
  	<tr>
  	  <td colspan=2>合计</td>
  		<td colspan=4>人民币(大写):壹</td>
  	</tr>
  	<tr>
  		<td colspan=2>交易时间</td>
  		<td>2021年</td>
  		<td colspan=2>时间戳</td>
  		<td>2021-06-04-1.00.00.0000</td>
  	</tr>
  </table>
	<p>票据打印时间:2021-06-04</p>
	<p><del>票据打印单位:xx银行</del></p>
    <p>操作员:默默
</body>
</html>
bgcolor  background
<html>

<body>

<h4>单元背景:</h4>  
<table border=1>
<tr>
  <td bgcolor=red>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background=../tupian/哆啦A梦.jpg>
  Second</td>
  <td>Row</td>
</tr>
</table>


</body>
</html>

 

align
<table width=400 border=1>
 <tr>
  <th align=left>消费项目....</th>
  <th align=right>一月</th>
  <th align=right>二月</th>
 </tr>
 <tr>
  <td align=left>衣服</td>
  <td align=right>$241.10</td>
  <td align=right>$50.20</td>
 </tr>
 <tr>
  <td align=left>化妆品</td>
  <td align=right>$0.00</td>
  <td align=right>$44.45</td>
 </tr>
 <tr>
  <td align=left>食物</td>
  <td align=right>$70.40</td>
  <td align=right>$650.00</td>
 </tr>
 <tr>
  <th align=left>总计</th>
  <th align=right>$1001.50</th>
  <th align=right>$744.65</th>
 </tr>
</table>

 

frame元素
<html>
<body>
<p> frame=box 全边框</p>
<table frame=box>
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>哦</td>
    <td>哦</td>
  </tr>
</table>

<p> frame=above 只有上边框</p>
<table frame=above>
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame=below 只有下边框</p>
<table frame=below>
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame=hsides 只有上下边框</p>
<table frame=hsides>
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame=vsides 只有左右边框</p>
<table frame=vsides>
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

</body>
</html>

 

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/diannao/157509.html

相关标签:无
上传时间: 2023-05-03 15:22:44
留言与评论(共有 20 条评论)
本站网友 延庆房屋出租
0秒前 发表
border就是我们的边框 进阶表格 那么有的人就会说我看到的表格不是长这个样子的,是这个样的 里面没有单元格空隙,而且相对复杂
本站网友 物欲横流
15分钟前 发表
td就是我们的列
本站网友 青空下的约定下载
30分钟前 发表
每个表格数据由 td 标签开始
本站网友 罗湛
6分钟前 发表
cellspacing是规定单元格之间的空白
本站网友 全库网
26分钟前 发表
td就是我们的列
本站网友 深圳哪里好玩
11分钟前 发表
tr就是我们的行
本站网友 wwdc2015
0秒前 发表
cellspacing
本站网友 螃蟹煮几分钟
14分钟前 发表
                                                                                 rowspan 属性规定单元格可横跨的行数
本站网友 魅蓝
20分钟前 发表
border就是我们的边框 进阶表格 那么有的人就会说我看到的表格不是长这个样子的,是这个样的 里面没有单元格空隙,而且相对复杂
本站网友 哈尔滨女子医院
23分钟前 发表
border就是我们的边框 进阶表格 那么有的人就会说我看到的表格不是长这个样子的,是这个样的 里面没有单元格空隙,而且相对复杂
本站网友 北京玉渊潭公园
17分钟前 发表
colspan 属性规定单元格可横跨的列数
本站网友 医药物流
19分钟前 发表
下面就是一个简单的表格
本站网友 客厅电视墙效果图
8分钟前 发表
border就是我们的边框 进阶表格 那么有的人就会说我看到的表格不是长这个样子的,是这个样的 里面没有单元格空隙,而且相对复杂
本站网友 南海南国桃园
22分钟前 发表
其实我们只需要加入以下标签:cellpadding
本站网友 非主流美女生活照
27分钟前 发表
每个表格行由 tr 标签开始
本站网友 内盘
10分钟前 发表
                                                                                 rowspan 属性规定单元格可横跨的行数
本站网友 蚌埠绿地国际花都
2分钟前 发表
colspan和rowspan即可 cellpadding是规定单元边沿与其内容之间的空白
本站网友 文件夹制作iso
5分钟前 发表
如下图 <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> </head> <body> <table border=1> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>男</td> <td>17</td> </tr> <tr> <td>小红</td> <td>女</td> <td>18</td> </tr> </table> </body> </html> th就是我们的表头它会自动加粗加大居中
本站网友 建筑垃圾处理
26分钟前 发表
colspan和rowspan即可 cellpadding是规定单元边沿与其内容之间的空白