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

相关推荐
前端小白从0开始31 分钟前
Vue3项目实现WPS文件预览和内容回填功能
前端·javascript·vue.js·html5·wps·文档回填·文档在线预览
難釋懷1 小时前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a1 小时前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
咸虾米1 小时前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志1 小时前
JavaScript Proxy 和 Reflect
前端·javascript
汤圆炒橘子2 小时前
状态策略模式的优势分析
前端
90后的晨仔2 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos
IT_陈寒2 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·人工智能·后端
挑战者6668882 小时前
vue入门环境搭建及demo运行
前端·javascript·vue.js
贩卖纯净水.2 小时前
Webpack的基本使用 - babel
前端·webpack·node.js