zoukankan      html  css  js  c++  java
  • 表单元素和表格

    今天尝试去自己做表格,试了一下单元格合并,通过尝试我发现如果规定了高度在合并,那么删除后的表格高度为初始高度,如果想要改变只能改变删除之后剩余的单元格高度

    <tr>
        <td rowspan="2" >&nbsp;</td>
        <td height="50">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>

    而在同一个单元格我没有实现行与列的合并

    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
      <th>姓名</th>
        <td bgcolor="#00FFFF" rowspan="3" colspan="2">&nbsp;</td>
       
        <td>&nbsp;</td>
      </tr>
      <tr>

    表格代码:

    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th height="50">11</th>
        <th>22</th>
        <th>33</th>
      </tr>
      <tr>
        <td height="50" align="center" valign="bottom" colspan="2">11</td>
       
        <td align="center" valign="bottom">33</td>
      </tr>
      <tr>
       <td height="50" align="center" valign="bottom" rowspan="2">11</td>
        <td height="50" align="center" valign="bottom">22</td>
        <td align="center" valign="bottom">33</td>
      </tr>
      <tr>
        
        <td height="50" align="center" valign="bottom">22</td>
        <td align="center" valign="bottom">33</td>
      </tr>
      <tr>
        <td height="50" align="center" valign="bottom">11</td>
        <td align="center" valign="bottom">22</td>
        <td align="center" valign="bottom">33</td>
      </tr>
    </table>
    </body>

    表格标签:

    1、<table>属性:1)width宽度:百分比

                               像素

                    2)border边框粗细:0表示无边框

                    3)cellspacing单元格边距:一般为0

                    4)cellpadding单元格间距:一般为0

                    5)bordcolor边框颜色

                    6)bgcolor背景颜色

    2、<td>:1)width单元格宽度:若未设置在单元格中输入内容后宽度自动调整

            2)heigh高度:

            3)align内容水平对齐方式:left左对齐,right右对齐

            4)valign内容垂直对齐方式:center居中对齐,bottom底部对齐,top顶部对齐,middle中部对齐

            5)colspan在行内合并列

            6)rowspan在列中合并行

    3、<tr>行:1)height高度

               2)bgcolor背景颜色

    4、<th>表头:用来替换<td>,写在<tbody>内

    5、<tbody>所有内容写在里面

    表单元素:

    <form></form>:1、action:网址,页面文件,需要提交给谁(网页)

                  2、method:提交方式:get:有长度限制,易丢失,不安全;post:隐式提交,安全 ,长度没有限制

                  3、target:提交页面在什么地方打开:_black:在新的选项卡打开;_self:在自身选项卡打开

    一、文本输入类:1)文本框:<input type="text" name="" value=""/>

                    2)密码框:<input type="password" name="" value=""/>

                    3)隐藏域:<input type="hidden" name="" value=""/>用于存放重要数据,不显示

                    4)文本域:<textarea cols="文本占几行" rows"文本占几列" />

    二、输入选择类:1)单选框:<input type="radio" name="" value="" />

                    2)复选框:<input type="checkbox" name="ck[]" value="" />

                    3)选择文件:<input type="file" name="file"/>

                    4)下拉:<select><option></option></select>

    三、按钮:1)普通按钮:<input type="button" value="登陆" />

              2)提交:<input type="submit" value="注册"/>

              3)重置:<input type="reset" value="重置"/>

              4)图片:<input type="image" src="图片地址" />

  • 相关阅读:
    Linux学习记录(四):Shell脚本
    Linux学习记录(三):Vim
    基于PyTorch构建神经网络
    Python开发【第一篇】:初识Python
    asyncio 并发编程(二)
    asyncio 并发编程(一)
    Linux 文件和目录操作命令(一)
    Django Model
    Django 之 Form 组件
    Django 模板系统
  • 原文地址:https://www.cnblogs.com/NCL--/p/6952480.html
Copyright © 2011-2022 走看看