HTML表格及元素

最新推荐文章于 2024-06-20 10:34:39 发布

韵然CP

最新推荐文章于 2024-06-20 10:34:39 发布

阅读量731

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40354578/article/details/93526164

版权

JavaWeb 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

标签 <table>...完整代码见示例</table>

作用布局，呈现需要表格布局的内容

1.表格标签是块级元素

2.全页布局的作用已经退出舞台了

3.专注于自己应该专注的布局领域

4.表格样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
                <td>17120581028</td>
                <td>小朱</td>
                <td>女</td>
            </tr>
    </table>
</body>
</html>

带表格头的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        <thead>
            <tr> 
               <th>学号</th>
               <th>姓名</th>
               <th>总分</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1712058</td>
                <td>小朱</td>
                <td>100</td>
            </tr>
            <tr>
                    <td>1711050</td>
                    <td>小谷</td>
                    <td>100</td>
                </tr>
        </tbody>
    </table>
</body>
</html>

表格的几个重要的知识点：边框问题（border）,单元格间距（cellspacing）,单元格边距(cellpadding),单元格跨列（colspan）,内容对齐（align）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>
<body>
    <table align="left" border=2 cellspacing="1" cellpadding="3" >
       <tbody align="center">
           <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1717</td>
            <td>猪</td>
            <td rowspan="2">母</td>
        </tr>
        <tr>
                <td>1717</td>
                <td>猪</td>
        </tr>
        <tr>
            <td>1111</td>
            <td>狗</td>
            <td>公</td>
        </tr>
        <tr>
            <td colspan="2">按钮</td>
        </tr>
        <tr >
            <td colspan="3">按钮</td>
        </tr>
    </tbody> 
    </table>
</body>
</html>

表单

标签 <form>...</form>

作用收集用户输入的内容（文本，文件）

属性 action：提交到的服务器端地址

method：指定提交时用哪种HTTP方法：post、get

name：标识

autocomplete：浏览器是否可以自动填充

enctype：指定表单内容编码

表单元素

input：文本、密码、单选、多选、按钮、数字、日期、颜色、范围、邮件、URL、文件

select:下拉列表

textarea：文本域

button：按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form name="test" id="1" action="" method="POST/GET" autocomplete="" enctype="UTF-8">
          <input type="text" maxlength="10" value="文本"/>
    </br>
    <input type="password"/>
    </br>
    <input name="gender" value="0" type="radio">男
    <input name="gender" value="1" type="radio">女
    </br>
    <input value="0" type="checkbox">电影
    <input value="1" type="checkbox">音乐
    <input value="2" type="checkbox">美术
    <input value="3" checked type="checkbox">被锁定
    </br>
    <input type="button" value="按钮">
    </br>
    <input type="number">
    </br>
    <input type="date">
    </br>
    <input type="color">
    </br>
    <input min="10" max="50" type="range">
    </br>  
    <input type="email">
    </br> 
    <input type="submit">
    </br> 
    <input type="url">
    </br> 
    <input type="file" multiple="multiple">
    </br> 
    <select name="" id="" multiple size="2">
        <option value="">易烊千玺</option>
        <option value="">刘昊然</option>
        <option selected value="">谭松韵</option>
    </select>
    </br> 
    <select name="" id="" >
            <option value="">易烊千玺</option>
            <option value="">刘昊然</option>
            <option value="">谭松韵</option>
    </select>
    </br>
    <style>
        textarea{
            resize:none;
        }
    </style>
    <textarea rows="3"  cols="8">
           哈哈哈哈哈哈哈哈哈哈哈哈
    </textarea >
    </br>
    <button type="submit" form="1">
        提交
    </button>
    </br>
    <button type="reset" form="1">
        重置提交
    </button>
    </br>
    </form>
    <button type="submit" form="1">
            1提交
    </button>
    </br>
    <button type="submit" name="test">
            2提交
    </button>
</br>
</body>
</html>

韵然CP

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
HTML表格及元素

标签 <table>...完整代码见示例</table>作用布局，呈现需要表格布局的内容1.表格标签是块级元素2.全页布局的作用已经退出舞台了3.专注于自己应该专注的布局领域4.表格样式<!DOCTYPE html><html lang="en"><head> <meta chars...
复制链接

扫一扫

专栏目录