前端开发 容器标签 0226

div块级标签

功能:

块级元素,霸占一行

用于页面结构

span内联级标签

功能:

行内元素,可与其它行内标签共处一行

用于页面布局

表格标签 table家庭

在这里插入图片描述

table 表格的最外层容器

<table></table>
  • border属性 定义表格的边框,设置值是数值
  • cellpadding属性 定义单元格内容与边框的距离,设置值是数值
  • cellspacing属性 定义单元格与单元格之间的距离,设置值是数值
  • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right
  • width属性,设置宽

tr 行标签

<tr></tr>

tr,代表一行。一个表会有多个行

它直属于table

td 单元格标签

<td></td>

单元格是位于行中的

表格的一行里面,会有多个单元格

》单元格标签的属性

  • align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
  • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
  • colspan 设置单元格水平合并,设置值是数值
  • rowspan 设置单元格垂直合并,设置值是数值
  • width 设置宽
  • height 设置高

th 单元格标题标签

如果单元格是小标题性质,用此标签,单元格会加粗,文本居中

表格功能的演练

使用表格标签完成以下表格的制作

在这里插入图片描述

单元格的宽分别为

80 120 80 120 120

颜色编码参考

https://www.114la.com/other/rgb.htm

鸣人的图片

https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=723821193,819125884&fm=26&gp=0.jpg

发布了941 篇原创文章 · 获赞 44 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/ifubing/article/details/104523106