码迷,mamicode.com
首页 > Web开发 > 详细

html第三天

时间:2021-04-19 15:46:54      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:body   单元格   title   ali   view   center   高度   port   cells   

table标签:用于直观展示用户信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端工程师第二天</title>
</head>

<body>
    <!-- 今天我们来学习table、input标签 -->
    <!-- 最简单的表格,如下 -->
    <table>
        <!-- tr:行,有多少个tr就有多少行 -->
        <!-- 第一行 -->
        <tr>
            <td>1111</td>
            <td>1222</td>
            <td>1333</td>
            <td>1444</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>2111111111</td>
            <td>2222222222</td>
            <td>2333333333</td>
            <td>2444444444</td>
        </tr>
    </table>


    <!-- 带有边框、内容居中 -->
    <!-- border:边框厚度 -->
    <!-- bordercolor:边框颜色 -->
    <!-- algin:table居中 -->
    <!-- cellspacing:单元格间距为0,就是没有间距;你可设置为10 尝试一下 -->
    <table border="1" bordercolor="blue" align="center" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>籍贯</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>小郑</td>
            <td>女</td>
            <td>保密</td>
            <td>广东-汕尾</td>
            <td>听歌、刷抖音</td>
        </tr>
        <tr>
            <td>小陈</td>
            <td>男</td>
            <td>保密</td>
            <td>江西-赣州</td>
            <td>篮球、写代码</td>
        </tr>

    </table>

    <div style="margin-top:20px;">

    </div>


    <!-- 设置宽度,高度 -->
    <table border="1" bordercolor="skyblue" cellspacing="0">
        <tr align="center" style="font-weight:bold;">
            <td width="100px;">姓名</td>
            <td width="50px;">性别</td>
            <td width="100px;">年龄</td>
            <td width="200px;">籍贯</td>
            <td width="500px;">爱好</td>
        </tr>
        <tr  align="center">
            <td>小郑</td>
            <td>女</td>
            <td>保密</td>
            <td>广东-汕尾</td>
            <td>听歌、刷抖音</td>
        </tr>
        <tr align="center">
            <td>小陈</td>
            <td>男</td>
            <td>保密</td>
            <td>江西-赣州</td>
            <td>篮球、写代码</td>
        </tr>

    </table>




    <h5>下面我们来学习网页中,最重要最常见的元素-----表单</h5>
    <input type="text" placeholder="请输入">





</body>

</html>

 


  

html第三天

标签:body   单元格   title   ali   view   center   高度   port   cells   

原文地址:https://www.cnblogs.com/KoBe-bk/p/14669884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!