【HTML】基础学习二：表格与表单

最新推荐文章于 2024-06-15 21:20:00 发布

古田兔子

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量37

点赞数

分类专栏：前端文章标签： html 学习 c#

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/130614988

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1. 表格的基础使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2314">
    <meta http-equiv="X-UA-Compatible"="width=device-width,initial-scale=1.0" >
    <meta name="description" content="全休领先" />
    <meta name = "keywords" content="IT培训，培训，IT" />
    <title>Document </title>
</head>
<body>
    <table border="3px" width="400px" height="300px" align="center">
        <caption>课程分类表</caption>
        <th>.net课程</th><th>Java课程</th><th>数据库课程</th>
        <tr>
            <td>C# 基础</td><td>Java基础</td><td>数据库基础</td>
        </tr>
        <tr>
            <td>C# 面向对象</td><td>Java面向对象</td><td>Oracle入门</td>
        </tr>
        <tr>
            <td>ASp.net</td><td>JSP开发</td><td>MySql入门</td>
        </tr>
    </table>
    
</body>


</html>

2.表格跨行与跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2314">
    <meta http-equiv="X-UA-Compatible"="width=device-width,initial-scale=1.0" >
    <meta name="description" content="全休领先" />
    <meta name = "keywords" content="IT培训，培训，IT" />
    <title>Document </title>
</head>
<body>
    <table border="1px" cellpadding="5" cellspacing="0" bordercolor="blue" align="center">
        <tr><td colspan="3" align="center"> 学生成绩表</td></tr>
        <th>班级名称</th><th>姓名</th><th>总分</th>
        <tr>
            <td rowspan="3">软件1班</td><td>张晓晓</td><td>180</td>
        </tr>
        <tr>
            <td>刘晓芬</td><td>175</td>
        </tr>
        <tr>
            <td>王晓峰</td><td>185</td>
        </tr>

        <tr>
            <td rowspan="3">软件2班</td><td>杜晓丽</td><td>180</td>
        </tr>
        <tr>
            <td>王晓丽</td><td>175</td>
        </tr>
        <tr>
            <td>周晓丽</td><td>185</td>
        </tr>
    </table>
    
</body>


</html>

3.表单控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2314">
    <meta http-equiv="X-UA-Compatible"="width=device-width,initial-scale=1.0" >
    <meta name="description" content="全休领先" />
    <meta name = "keywords" content="IT培训，培训，IT" />
    <title>Document </title>
</head>
<body>
    <form action="" method="post" name="myform">
        用户名：<input type="text" value="小王" name="userName" size="20" maxlength="10" > <br>
        密码：<input type="password" name="userPwd" size="20" maxlength="10" > <br>
        性别：<input type="radio" value="男" checked = "true" name="userGender">男
        <input type="radio" value="女" name="userGender">女 <br>
        专业：<input type="checkbox" value="计算机" name="major">计算机
        <input type="checkbox" value="软件工程" name="major">软件工程
        <input type="checkbox" value="外贸英语" name="major">外贸英语<br>

    </form>
 
</body>


</html>