![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
创建一个二维数组，进行遍历：
<?php //二维数组 $movies = [ ['倚天屠龙记', '都挺好','如果可以这样爱'], ['复仇者联盟4', '波西米亚狂想曲','阿丽塔'], ['情书', '天空之城', '龙猫'] ]; $navs = [ 'gc'=>'国产好剧', 'om'=>'欧美猛片', 'rh'=>'日韩新片' ]; ?> <!doctype html> <html lang="en"> <head> <title>遍历数组</title> </head> <body> <h1><?php echo $navs['gc'] ?></h1> <ol> <!-- 在html中遍历数组键名为0的数组，并输出在页面的有序列表中--> <?php foreach($movies[0] as $movie): ?> <li><a href=""><?php echo $movie; ?></a></li> <?php endforeach ; ?> </ol> <h2><?php echo $navs['om'] ?></h2> <ol> <!-- 在html中遍历数组键名为1的数组，并输出在页面的有序列表中--> <?php foreach($movies[1] as $movie): ?> <li><a href=""><?php echo $movie; ?></a></li> <?php endforeach ; ?> </ol> <h3><?php echo $navs['rh'] ?></h3> <ol> <!-- 在html中遍历数组键名为0的数组，并输出在页面的有序列表中--> <?php foreach($movies[2] as $movie): ?> <li><a href=""><?php echo $movie; ?></a></li> <?php endforeach ; ?> </ol> </body> </html>
点击 "运行实例" 按钮查看在线实例
最终效果：
利用二维数据生成一个表格，用foreach()来遍历数组数据：
二维数组：
<?php //列表商品详情 $commodity = [ [ 'model'=>'iphone X Max', 'brand'=>'Apple', 'price'=>'12000', 'cate_id'=>'手机' ], [ 'model'=>'OnePlus 7 Pro', 'brand'=>'OnePlus', 'price'=>'4500', 'cate_id'=>'手机' ], [ 'model'=>'XiaoMi 9', 'brand'=>'Xiaomi', 'price'=>'3000', 'cate_id'=>'手机' ], [ 'model'=>'macbook pro 2019', 'brand'=>'Apple', 'price'=>'13000', 'cate_id'=>'电脑' ], [ 'model'=>'surface pro 6', 'brand'=>'Microsoft', 'price'=>'8000', 'cate_id'=>'电脑' ], [ 'model'=>'ThinkPad', 'brand'=>'Lenovo', 'price'=>'10000', 'cate_id'=>'电脑' ], [ 'model'=>'Apple watch 4', 'brand'=>'Apple', 'price'=>'4000', 'cate_id'=>'***' ], [ 'model'=>'HUAWEI watch2 Pro', 'brand'=>'HUAWEI', 'price'=>'2000', 'cate_id'=>'***' ], [ 'model'=>'Mi band', 'brand'=>'XiaoMi', 'price'=>'100', 'cate_id'=>'***' ] ]; //表头 $navs = ['类别', '型号', '***', '单价']; // 网站的系统设置 $system = [ 'title'=>'电子设备简介', 'desc'=>'收集全球最受欢迎的电子设备', 'key'=>'手机，电脑，***', 'copy'=>'php中文网' ];
点击 "运行实例" 按钮查看在线实例
网页底部代码：
<!--底部版权--> <div class="footer"> <p class="copyright"><?php echo $system['copy']; ?>© 版权所有</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
网页主体代码：
<?php //加载列表数据 require "inc/header.php"; ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../static/css/style.css"> <meta name="description" content="<?php echo $system['desc'] ?>"> <meta name="keywords" content="<?php echo $system['key'] ?>"> <title><?php echo $system['title'] ?></title> </head> <body> <div> <h1>电子设备表格</h1> <?php echo "<table>"; //输出表格table echo "<caption>".$system['title']."</caption>"; //输出表格名称 echo "<thead>"; //输出表头 echo "<tr>"; foreach ($navs as $nav): //遍历准备的表头数组 echo '<td class="header">'. $nav .'</td>'; //利用遍历以此输出表头数据 endforeach; //结束遍历 echo "</tr>"; echo "</thead>"; echo "<tbody>"; //输出表体部分 foreach($commodity as $value): //利用遍历输出表格数据 echo "<tr>"; echo "<td>".$value['cate_id']."</td>"; echo "<td>".$value['model']."</td>"; echo "<td>".$value['brand']."</td>"; echo "<td>".$value['price']."</td>"; echo "</tr>"; endforeach; echo "</tbody>"; echo "</table>"; echo "</div>"; //导入底部模板 require 'inc/footer.php' ?>
点击 "运行实例" 按钮查看在线实例
样式表：
h1 {
height: 30px;
background-color: #636363;
color: white;
text-align: center;
line-height: 30px;
}
div {
width: 400px;
height: 400px;
margin: 0 auto;
}
.header {
background-color: #81a2be;
padding: 20px;
border: black 1px solid;
text-align: center;
}
tr td {
border: black 1px solid;
text-align: center;
}
.footer {
height: 30px;
background-color: #636363;
color: white;
text-align: center;
line-height: 30px;
}点击 "运行实例" 按钮查看在线实例
最终显示效果：
