表单的应用之简单饭店菜单

最新推荐文章于 2021-11-09 20:27:43 发布

原创最新推荐文章于 2021-11-09 20:27:43 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

html复习专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建一个带有跨列和行扩展的菜单布局，重点展示了表格元素的border、cellspacing和cellpadding属性的应用。适合前端开发者学习基本布局技巧。

首先运用到的核心知识是：

<table border="边框大小" cellspacing="空隙大小" cellpadding="填充大小">

这是效果图：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- <table border="边框大小" cellspacing="空隙大小" cellpadding="填充大小">-->
   <table border="5" cellspacing="10px" cellpadding="5px" bgcolor="#deb887" align="center" width="666px">
       <tr>
           <td colspan="3" align="center">
               This is my menu
           </td>
       </tr>
       <tr>
           <td rowspan="2">Meat dishes
           </td>
           <td>eggs
           </td>
           <td>beef
           </td>
       </tr>
       <tr>
           <td>Noodles
           </td>
           <td>beef
           </td>
       </tr>
       <tr>
           <td rowspan="2">Lunch
           </td>
           <td>eggs
           </td>
           <td>beef
           </td>
       </tr>
       <tr>
           <td>Noodles
           </td>
           <td>beef
           </td>
       </tr>
   </table>
</body>
</html>