【Web应用技术基础】HTML(3)——表格

目录

题目1:原始表格

题目2:width、height

[题目3: cellpadding](#题目3: cellpadding)

题目4:cellspacing、cellpadding

题目5:caption

题目6:rowspan

题目7:colspan

题目8:汇总题


题目1:原始表格

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    
    <table border="5">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
        </tr>
    </table>


</body>
</html>

题目2:width、height

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" width="100%" height="200">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>  
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>  
        </tr>
    </table>
            
     
</body>
</html>

题目3: cellpadding

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellpadding="6">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>

    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
       
    </tr>
    </table>

</body>
</html>

题目4:cellspacing、cellpadding

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>

    </tr>
    <tr>
       <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>

    </tr>
</table>
        
        
</body>
</html>

题目5:caption

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <!-- ********* Begin ********* -->

 <caption>科目成绩</caption>

        <!-- ********* End ********* -->
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
       </tr>
    </table>
</body>
</html>

题目6:rowspan

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
 
    <tr>
        <td>商品</td>
        <td>数量</td>
        <td>单价</td>
        <td>备注</td>
    </tr>
    <tr>
        <td>短袖</td>
         <td>70</td>
        <td>30</td>
        <td rowspan="2">无</td>
    </tr>
    <tr>
        <td>裤子</td>
         <td>50</td>
        <td>30</td>
    </tr>
        
    </table>
</body>
</html>

题目7:colspan

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
   
    <tr>
        <td>商品</td>
        <td>数量</td>
        <td>单价</td>
    
    </tr>
    <tr>
        <td>短袖</td>
         <td>70</td>
        <td>30</td>
      
    </tr>
    <tr>
        <td>裤子</td>
         <td>50</td>
        <td>30</td>
    </tr>
     <tr>
        <td>合计</td>
         <td colspan="2">3600</td>
       
    </tr>
        
    </table>
</body>
</html>

题目8:汇总题

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align:center;
    }
    </style>
    <!--设置表格-->
 <table border="2px" width="100%" cellspacing="0" cellpadding="6"> 
        <caption>本周财政计划</caption>
    <!-- 第1行 -->
        <tr align="center">
            <td colspan="2" rowspan="2"> 项目</td>

            <td colspan="2">本周发生</td>
            
            <td rowspan="2">备注</td>
            
        </tr>
    <!-- 第2行 -->

        <tr align="center" >
            <td>收入</td>
            <td>支出</td>
           
        </tr>
    <!-- 第3行 -->

        <tr align="center">
            <td rowspan="3">收入</td>
            <td>贷款收回</td>
            <td>8700</td>
            <td>0</td>
            <td></td>
            
            
        </tr>
    <!-- 第4行 -->
    
        <tr align="center">
           
            <td>内部转款</td>
            <td>6000</td>
            <td>0</td>
            <td></td>
            
        </tr>
    <!-- 第5行 -->
    
        <tr align="center">
            <td>收入合计</td>
            <td>14700</td>
            <td>0</td>
            <td></td>
            
        </tr>
    <!-- 第6行 -->
    
        <tr align="center">
            <td rowspan="3">支出</td>
            <td>采购支出</td>
            <td>0</td>
            <td>5000</td>
            <td></td>
            
        </tr>
    <!-- 第7行 -->
    
        <tr align="center">
            
            <td>工资支出</td>
            <td>0</td>
            <td>7000</td>
            <td></td>
            
        </tr>
    <!-- 第8行 -->

        <tr align="center">
            <td>支出合计</td>
            <td>0</td>
            <td>12000</td>
            <td></td>
            
        </tr>
   
    </table>
        
</body>
</html>

注意:

要在HTML中设置表格文本水平居中,可以使用CSS样式。具体操作如下:

1. 在<head>标签内添加<style>标签,用于编写CSS样式。
2. 在<style>标签内,为表格的<td>标签设置text-align属性为center。

相关推荐
人工智能研究所16 分钟前
Claude + HyperFrames:用 HTML 方式制作视频,AI 时代一切皆可 HTML?
人工智能·html·音视频·ai 视频·hyperframes·claude-
Hooray31 分钟前
为了在 Vue 项目里用上想要的 React 组件,我写了这个 skill
前端·ai编程
咸鱼翻身了么33 分钟前
模仿ai数据流 开箱即用
前端
风花雪月_33 分钟前
🔥IntersectionObserver:前端性能优化的“隐形监工”
前端
Bigger33 分钟前
告别 AI 塑料感:我是如何用 frontend-design skill 重塑项目官网的
前端·ai编程·trae
发际线向北33 分钟前
0x02 Android DI 框架解析之Hilt
前端
zhensherlock1 小时前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
liangdabiao1 小时前
开源AI拼豆大升级 - 一键部署cloudflare page - 全免费 web和小程序
前端·人工智能·小程序
SuperHeroWu72 小时前
【鸿蒙基础入门】概念理解和学习方法论说明
前端·学习·华为·开源·harmonyos·鸿蒙·移动端
Full Stack Developme2 小时前
MyBatis-Plus 流式查询教程
前端·python·mybatis