自学前端第十六天:表格和input和textarea控件

一.表格 table (后期有UI/bootstrap组件辅助工具写)

一.表格概念:就是一张为 横行纵列 多行多列的单元格表

二.表格语法结构: (三层嵌套关系table>tr>td)

<table>  表格
  <tr>    行
    <td>单元格内的文字</td>  单元格/列
    ...
  </tr>
  ...
</table>

①tr 元素定义表格行(table row)

②th 元素定义表头(table head[加粗的单元格]) = ③td 元素定义表格单元(table data)

(th加粗单元格和td普通单元格都要被tr嵌套才能使用)

1.table用于定义一个表格的标签。(!!!)

2.tr(table row)用于定义表格中的一行，必须嵌套在 table标签中，在 table中第几对 tr，就表示第几行。(即和p类似,<tr></tr>会自动换行!!!)

3.td(table data)用于定义表格中的单元格/列，必须嵌套在<tr></tr>标签中，第几对 <tr> </tr>中包含第几对<td></td>，就表示第几行中的第几个单元格/第几列.

注意：

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素

三.表头标签(th 功能和td一样,只是会加粗和自动居中了)

1.表头th一般位于表格的第一行的tr行表头或第一列的td列表头，
①列表头:(第一对tr即第一行中所有单元格即列,都写上th就表示列表头了,死记!!!)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1dbyKIr-1620062698369)(C:\Users\tuyue\AppData\Local\Temp\1611830990005.png)]

②行表头:(每一对tr即每一行中的第一个单元格即列,都写上th就表示行表头了,死记!!!)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVMv3hYG-1620062698371)(C:\Users\tuyue\AppData\Local\Temp\1611831220473.png)]

2.th会使其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<table border="1" align="right">
  <caption>1班花名册<caption>//表格标题(默认居中)
      
  <tr>          //第一行,全部都是th就是列表头
    <th>姓名</th>   
    <th>性别</th>
   	<th>年龄</th>
  </tr>   
  <tr>             //第二行,第一个写th就是一个行表头
    <th>张三</th>
    <td>男</td>
    <td>119</td>
  </tr>
  <tr>
   	<th>小花</th>
    <td>女</td>
    <td>17</td>
  </tr> 
</table>

三.table标签属性

(注意:不是table的CSS样式,而是table标签属性,大多过时得用CSS代替)

属性	值	描述
align	leftcenterright	**过时。**请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	过时。请使用样式代替。规定表格的背景颜色。
border	px	**不赞成使用.**规定表格边框的厚度。默认为 border=“0”
cellpadding	px**%*	HTML5 不支持, 规定单元边沿与其内容之间的空白。(类似盒子和内容的padding) PS:不允许有单独上下左右设置,只能一起扩充
cellspacing	px**%*	HTML5 不支持, 规定单元格之间的空白。(类似盒子之间的margin)
width	*%*pixels	规定表格的宽度。(不设置就是默认内容多宽多高)

1.PS:标签属性内的属性值不要加px等单位:切记,默认有!!!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alj58pvp-1620062698378)(C:\Users\tuyue\AppData\Local\Temp\1611830562158.png)]

2.table的border属性(<'table border=“1”>) != CSS的border

table的border 属性**仅仅用来规定表格单元周围是否显示边框,**具体边框用css的border来。

值	描述
“”	表格单元周围没有边框（表格可用于布局目的）。
“1”	在表格单元周围添加边框（表格不用于布局目的）。

table,th,td {
   

	border: 1px solid blue; (这里css才是设置真正的设置边框border)

}

**3.cellpadding: (建议用CSS的padding代替) **

4.cellspacing:规定单元格之间的间距。(类似单元格之间的margin,但是table没有margin属性)

cellspacing 属性规定单元之间的空间，以像素计。若不设置该属性，则其默认值为 cellspacing=“2”。

**注意：table的属性cellspacing=0 时,就等同于设置了table的CSS折叠样式border-collapse: collapse; **

四.一个综合的表格结构（table>thead(caption,tr>th)>tbody(tr>th=td)）

在使用表格进行布局时，可以可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

表格头部:<thead></thead>  , 一般包含网页的logo和导航等头部信息。

表格的主体:<tbody></tbody>：用于定义主体内容

上述两个标签都必须位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

PS: thead, tbody, 和 tfoot 元素"不写"默认也不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<table border="1">
  <thead>
   <caption>1班花名册<caption>//表格标题(默认居中)
    <tr>
      <th>Month</th>  //列表头