第一次尝试使用制作HTML列表与表格
一、利用<li>标签，完成此次列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表的嵌套使用</title> </head> <body> <h1>商城支付方式</h1> <!--实验3，列表的嵌套使用--> <ul type="square"> 支付方式 <li>货到付款</li> <li>财付通</li> <li>支付宝</li> <li>网银在线</li> </ul> <hr color="blank" size="2cm" <h2>网银在线支付步骤（有序列表）</h2> <!--网银在线支付步骤（有序列表）--> </div> <ol> <li>选择您要使用的网上银行</li> <li>显示您的应付总价，点击确认无误，付款</li> <li>确定您在银行的预留信息，点击确定</li> <li>输入您的网银账号 ，登录密码，验证码</li> <li>支付成功，提示“已完成付款”</li> </ol> <hr color="black" size="2cm" </body> </html><!--...-->是HTML注释，不会显示在页面上，用来给代码做备注（注意：这只是备注，不是内容，这只是为了方便解析）
<ul type="square">是无序列表，type=“square”把默认的圆点项目符号方块
<li>是列表项，每一个<li>对应一个支付方式、支付方式
<hr>是水平线
以上就是我对此次列表的解析，下面我们来看看它的运行结果吧~
这就是我做出来的列表啦~大家快去试试吧~
二、原本表格与合并表格
1、原本表格的制作与实验结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实验</title> </head> <body> <table border="1" width="400rpx" height="200rpx"> <tr> <td>苹果</td> <td>草莓</td> <td>葡萄</td> </tr> <tr> <td>蓝莓</td> <td>猕猴桃</td> <td>桃子</td> </tr> <tr> <td>榴莲</td> <td>牛奶果</td> <td>樱桃</td> </tr> </table> </body> </html>border="1" 表示给表格加1像素的黑色边框
有三组<tr>每组三个，表示我所做的表格是三行三列，如需多一行一列可在第三组<tr>后面再加一组<tr>
<tr>是定义表格的一行
<td>是定义普通单元格（大部分用于放置数据）
以上就是我对这次原本表格制作的解析，下面我们来看一下运行结果吧~
这就是我做出来的原本表格啦~，下面我们来制作表格的合并
2、合并表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实验</title> </head> <body> <table border="1" width="400rpx" height="200rpx"> <tr> <td>苹果</td> <td>草莓</td> <td rowspan="2">葡萄</td> </tr> <tr> <td colspan="2">蓝莓</td> </tr> <tr> <td>榴莲</td> <td>牛奶果</td> <td>樱桃</td> </tr> </table> </body> </html>colospan="2"表示横向合并2列
rowspan="2"表示纵向合并2列
注意：想要合并多少列可以更改数字哦~
下面来看一下我的运行结果吧~
以上就是我本次分享的全部内容，大家快来尝试一下吧~