前端开发 简单表格的编写练习 0228

最终的效果

前端开发 简单表格的编写练习 0228

table标签的使用格式

层级结构

前端开发 简单表格的编写练习 0228

阶段一,内容与结构的完成

前端开发 简单表格的编写练习 0228

  • tr 行
  • td 单元格

效果如图
前端开发 简单表格的编写练习 0228

阶段二,表格的边框

前端开发 简单表格的编写练习 0228

前端开发 简单表格的编写练习 0228

阶段三,表格的间隙

前端开发 简单表格的编写练习 0228

前端开发 简单表格的编写练习 0228

阶段四,宽度

让宽度一样

前端开发 简单表格的编写练习 0228

前端开发 简单表格的编写练习 0228

阶段五,文字居中

前端开发 简单表格的编写练习 0228

前端开发 简单表格的编写练习 0228

阶段六,直接给列添加宽度

  • 给五列添加了宽度
  • 不用给每一个单元格添加width属性了
  • 更加方便
    前端开发 简单表格的编写练习 0228

阶段七,让每一行居中

  • 对tr添加align属性
  • 不用给每个单元格添加居中的设定了

前端开发 简单表格的编写练习 0228

前端开发 简单表格的编写练习 0228

表格的小结

前端开发 简单表格的编写练习 0228