更新時(shí)間:2023-06-05 來源:黑馬程序員 瀏覽量:
在制作網(wǎng)頁時(shí),為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示,可以使用表格對網(wǎng)頁進(jìn)行規(guī)劃。在Word文檔中,可通過播入表格的方式來創(chuàng)建表格,而在HTML網(wǎng)頁中要想創(chuàng)建表格,需要使用相關(guān)的表格標(biāo)記才能創(chuàng)建表格。在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所示。
在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所示。
<table> <tr> <td>單元格內(nèi)的文字</td> </tr> </table>
在上述的語法中,包含3對HTML標(biāo)記,分別為<table></table>、<tr></tr>、<td></td>,它們是創(chuàng)建表格的基本標(biāo)記,缺一不可。<table></table>用于定義一個(gè)表格;<tr></tr>用于定義表格中的行,必須嵌套在<table></table>標(biāo)記中,<td></td>用于定義表格中的單元格,也可稱為表格中的列,必須嵌套在<tr></tr>標(biāo)記中。接下來,通過一個(gè)案例來演示<table>標(biāo)記的使用。在chapter01文件夾中創(chuàng)建一個(gè)HTML文件htmlDemo05,其關(guān)鍵代碼如文件所示。
<body> <table border="1"> <tr> <td>姓名</td> <td>語文</td> <td>數(shù)學(xué)</td> <td>英語</td> </tr> <tr> <td>itcast</td> <td>95</td> <td>80</td> <td>90</td> </tr> </table> </body>
標(biāo)記的border 屬性會(huì)為每個(gè)單元格應(yīng)用邊框,并用邊框圍繞表格。這里將 border
的屬性設(shè)置為1,單位是像素,表示該表格邊框的寬度為1像素。如果 border
屬性的值發(fā)生改變,那么只有圍繞表格的邊框尺寸會(huì)發(fā)生變化,表格內(nèi)部的邊框還是1像素寬。如果將border的屬性值設(shè)置為0或者刪除border屬性,將顯示沒有邊框的表格。使用瀏覽器打開文件,顯示結(jié)果如圖1所示。
有邊框表格的顯示效果
將border屬性值設(shè)置為0,保存后刷新頁面,瀏覽器的顯示結(jié)果如圖所示。
無邊框表格的顯示效果
從上圖的顯示效果可以看出,表格中的內(nèi)容依然整齊有序地排列著,但是這時(shí)已看不到邊框。在實(shí)際開發(fā)中,建議使用CSS來添加邊框樣式和顏色。
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營】深圳跨境電商運(yùn)營畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級(jí)93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級(jí)均薪12k+
2025-09-19