html表格内容总结(html开发笔记18-实战-绘制第一个html表格)

一、如何从网页中绘制出下面这个表格

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(1)

二、解题思路

1、表格分析:**表格由 5 行 ,6 列 构成,且第一行第一列为 空。

2、绘制思路:

(1)先画出第一行第一列,且空着它。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(2)

(2)再加一列,写上周一。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(3)

(3)再复制几个 td 标签,将周二至周五也绘制出来,此时 “列” 就绘制完了。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(4)

(4)绘制行:在下面再复制一行 tr 和 td ,并且添加上文字,此时第 2 行的 第1列也就出来了。此时第一行的第一列的单元格就自动展开了,不用特殊调试。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(5)

(5)如法炮制,再复制两行 tr 和 td ,将第二节和第三节也添加上。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(6)

(6)在第 2 行中复制一对 td 标签添加 html ,这样,再复制 td 添加 css ,以此表格就绘制出来了。

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(7)

成品图标注:↓

html表格内容总结(html开发笔记18-实战-绘制第一个html表格)(8)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页