tft每日頭條

 > 圖文

 > html表格内容總結

html表格内容總結

圖文 更新时间:2025-01-09 00:34:42
一、如何從網頁中繪制出下面這個表格

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

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved