【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。

相关推荐
砚凝霜8 分钟前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
珐恩AI-人工智能30 分钟前
大模型意图召回偏差分析:GEO如何解决“有收录却不触发问答曝光”的难题
大数据·前端·人工智能·html·流量运营·geo优化
程序员老赵1 小时前
Docker 部署禅道 ZenTao:轻松搭建研发项目管理平台
前端·后端·github
前端小卡拉1 小时前
用了大半年 AI 编程工具,我才搞懂 Skill 到底是什么
前端·javascript
hunterandroid1 小时前
[鸿蒙从零到一] HarmonyOS 单元测试与 UI 自动化测试实战:从代码质量到用户体验的全链路保障
前端
郭邯1 小时前
用 Intl.DateTimeFormat 手写一个时区转换器,顺便聊聊我和 AI 结对编程的日常
前端·javascript
阿奇__1 小时前
微前端、iframe与Auth Code技术方案对比
前端
FungLeo1 小时前
React 管理后台实战 · 前端请求层怎么写?401 静默刷新、token 并发竞争、强制改密拦截一次说清
前端·react.js·前端框架
Vuji2 小时前
Pi 插件解剖|ssh.ts:只用 221 行,让 Agent 直接在远程机器干活
前端·人工智能·agent
漏刻有时2 小时前
Three.js 3D地图开发实录:从GeoJSON到流光飞线,一个纯前端SPA可视化引擎的12个坑
前端