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

相关推荐
90后小陈老师28 分钟前
3D个人简历网站 5.天空、鸟、飞机
前端·javascript·3d
不爱吃糖的程序媛4 小时前
浅谈前端架构设计与工程化
前端·前端架构设计
郝YH是人间理想6 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core6 小时前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows
初遇你时动了情6 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287567 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔7 小时前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好7 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
运维@小兵7 小时前
vue配置子路由,实现点击左侧菜单,内容区域显示不同的内容
前端·javascript·vue.js
koiy.cc8 小时前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts