表格的创建

119 阅读3分钟

table表格的基本内容

数据表格的创建:<table> (创建表格)
          <tr> (表示行)
            <td>文本内容</td> (表示单元格;也可以指列)
            <td>文本内容</td> (表示单元格;也可以指列)
          </tr> 
          <tr> 
            <td>文本内容</td> 
            <td>文本内容</td> 
          </tr>
        <table>

    (快捷键:table>tr>td乘数字   table>tr*2>td乘数字)

table表格的相关属性:【1】宽度 width
        【2】高度 height
        【3】边框 border
        【4】边框颜色 bordercolor
        【5】背景颜色 bgcolor
        【6】水平对齐 align="left"或right或center"
        【7】cellspacing="单元格与单元格之间的距离"
        【8】cellpadding="单元格与内容之间的空隙"


<table border="1" width="50%" height="500px" align="center" bordercolor="red" bgcolor="yellow" cellspacing="20" cellpadding="10">

行tr属性和单元格td属性:【1】高度:height
          【2】背景颜色:bgcolor
          【3】文字水平对齐:align="left"或right或center"
          【4】文字垂直对齐:valign="top"或middle或bottom"


<tr bgcolor="orange" height="200" align="center" valign="top">
<td bgcolor="orange" height="200" align="center" valign="top">

表格合并列:colspan="所要合并的单元格的列数",必须给td (水平合并)
      rowspan="所要合并的单元格的行数",必须给td (竖直合并)

表单标签
  作用:收集用户信息
  <form method="get或post" action="向何处发送表单数据”>
   <input/>
    A.属性 type定义输入框的类型
      1.文本框 type="text"  密码框 type="password"
      2.提交框 type="submit"和<button>提交按钮</button>一样
      3.按钮框 type="button" 单纯的按钮
      4.重置框 type="reset" 清空的效果
    B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
    C.属性 name必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
    D.属性 value
  </form>


(form当中method的post和get的区别:get在提交表单到URL中可以看到,post在这一过程用户看不到;get安全性非常低,post安全性较高,但get的执行效率比post好)