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

相关推荐
月下点灯1 天前
✨项目上线后产品要求把应用字体改大点📏怎么办?一招教你快速解决🔧
前端·vite
xvmingjiang1 天前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭1 天前
ES5 和 ES6 类的实现
前端·javascript·es6
excel1 天前
Three.js 实现高分辨率地球边界可视化
前端
LaoZhangAI1 天前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
用户11481867894841 天前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI1 天前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
用户11481867894841 天前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人1 天前
Pinia状态管理有哪些常用API?
前端
小高0071 天前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试