【html基礎(chǔ)】原生表格一鍵搭建，一鍵生成代碼

時(shí)間：2023-07-25 23:21:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-25 23:21:02 來源：網(wǎng)站運(yùn)營

【html基礎(chǔ)】原生表格一鍵搭建，一鍵生成代碼： 在我們做網(wǎng)頁當(dāng)中經(jīng)常要用到表格，當(dāng)然也有人會(huì)選擇用div來繪制一個(gè)表格。而用div繪制會(huì)存在諸多問題，而且也不方便維護(hù)。所以表格標(biāo)簽也是我們前端開發(fā)必備的技能。

我們先通過guiplan一鍵插入一個(gè)表格模版，



如果看不懂可以看源代碼如下：

<table id="g570b4">

<tr id="g419fe">

<th id="g16b02">th標(biāo)頭

</th>

<th id="gaae0b" class=" u7959f">th標(biāo)頭

</th>

<th id="gd78bc">th標(biāo)頭

</th>

</tr>

<tr id="g5af9b">

<td id="g920bb">td表格單元

</td>

<td id="g9de93" class=" uab6e6">td表格單元

</td>

<td id="gea8dc">td表格單元

</td>

</tr>

<tr id="cf47d6" class=" u0cbcd ">

<td id="c913e3" class=" ud690a ">td表格單元

</td>

<td id="c452e0" class=" uab6e6 ">td表格單元

</td>

<td id="c917b3" class=" u7eb06 ">td表格單元

</td>

</tr>

<tr id="cba81f" class=" u0cbcd ">

<td id="c3dae7" class=" ud690a ">td表格單元

</td>

<td id="c7d0f9" class=" uab6e6 ">td表格單元

</td>

<td id="c9fe10" class=" u7eb06 ">td表格單元

</td>

</tr>

</table>

其中表格標(biāo)簽里還含有tr標(biāo)簽，th標(biāo)簽，td標(biāo)簽。tr標(biāo)簽則表示一行，td標(biāo)簽則表示行里的每一列，而th標(biāo)簽則表示表格的頭部標(biāo)題，th標(biāo)簽除了表示與現(xiàn)實(shí)頭部標(biāo)題以外，還有一個(gè)很重要的作用就是它可以控制對應(yīng)列里寬度，這樣如果發(fā)現(xiàn)內(nèi)容顯示不全的情況下，我們就可以在guiplan里拖拽th標(biāo)簽的寬度即可。




表格除了這些子元素以外，表格還自帶屬性。當(dāng)然這些屬性我們也記不住，去查文檔效率又太低。我們可以繼續(xù)通過guiplan一鍵插入屬性即可，比如給表格添加邊框，只需要選中邊框然后插入進(jìn)來即可。







當(dāng)然邊框也有很多屬性，以上是內(nèi)側(cè)邊框與外側(cè)邊框一起顯示的效果，下一章講解表格的其他屬性。最后附上生成之后的源代碼

<table id="g570b4" border="1">

<tr id="g419fe">

<th id="g16b02">th標(biāo)頭

</th>

<th id="gaae0b">th標(biāo)頭

</th>

<th id="gd78bc" class=" u5899e">地址

</th>

</tr>

<tr id="g5af9b">

<td id="g920bb">td表格單元

</td>

<td id="g9de93" class=" uab6e6">td表格單元

</td>

<td id="gea8dc">杭州浦東虹橋某某小區(qū)某某地點(diǎn)

</td>

</tr>

<tr id="cf47d6" class=" u0cbcd ">

<td id="c913e3" class=" ud690a ">td表格單元

</td>

<td id="c452e0" class=" uab6e6 ">td表格單元

</td>

<td id="c917b3" class=" u7eb06 ">td表格單元

</td>

</tr>

<tr id="cba81f" class=" u0cbcd ">

<td id="c3dae7" class=" ud690a ">td表格單元

</td>

<td id="c7d0f9" class=" uab6e6 ">td表格單元

</td>

<td id="c9fe10" class=" u7eb06 ">td表格單元

</td>

</tr>

</table>

<style>

.u5899e {

width: 162px;

}

</style>