table的表格合并属性、边框属性

最新推荐文章于 2024-05-24 17:50:52 发布

湘水狱

最新推荐文章于 2024-05-24 17:50:52 发布

阅读量1.8k

点赞数 1

分类专栏： HTML/CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_45527702/article/details/104985813

版权

HTML/CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
主要展示的是表格的合并、边框的设置
border表示边框
cellpadding表示表格的内边框（文本内容与边框之间的距离）
cellspacing表示表格与表格之间的距离
colspan表示行中的表格合并，如：蔬菜区和调料区
rowspan表示列中表格的合并，如：绿色区域green
bgcolor表示背景颜色
align表示位置的属性，如：center居中、left居左、right居右
size表示字体的大小
width表示宽度，如：500px（固定值）、50%（自适应值），注意：这个自适应是根据浏览界面的大小来进行自我调节
height表示高度

原代码：


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Table is display</title>
 </head>
 <body>
  <table border="1px" cellpadding="10px" cellspacing="3px" align="center" width="50%" bgcolor="lightgray">
   <th colspan="4">商品表单</th>
   <td rowspan="5" width="25%" bgcolor="chartreuse">地址:A市B区C街道</td>
   <tr> 
    <td align="center" colspan="2" bgcolor="cyan">蔬菜区</td> 
    <td align="center" colspan="2" bgcolor="coral">调料区</td>
   </tr>
   <tr>
    <td bgcolor="cyan">名称</td>
    <td>价格/￥</td>
    <td bgcolor="coral">名称</td>
    <td>价格/￥</td>
   </tr>
   <tr>
    <td bgcolor="cyan">香菜</td>
    <td>12.5</td>
    <td bgcolor="coral">老抽</td>
    <td>5.0</td>
   </tr>
   <tr>
    <td bgcolor="cyan">菠菜</td>
    <td>6.28</td>
    <td bgcolor="coral">麻油</td>
    <td>4.0</td>
   </tr>
  </table>
 </body>
</html>

湘水狱

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
table的表格合并属性、边框属性

效果图：主要展示的是表格的合并、边框的设置border表示边框cellpadding表示表格的内边框（文本内容与边框之间的距离）cellspacing表示表格与表格之间的距离colspan表示列中的表格合并，如：绿色区域greenrowspan表示行中表格的合并，如：蔬菜区和调料区bgcolor表示背景颜色align表示位置的属性，如：center居中、left居左、right居...
复制链接

扫一扫