[html基礎]原生表格一鍵搭建，一鍵生成程式碼

前端周哥發表於2022-08-22
HTML

在我們做網頁當中經常要用到表格，當然也有人會選擇用div來繪製一個表格。而用div繪製會存在諸多問題，而且也不方便維護。所以表格標籤也是我們前端開發必備的技能。
我們先透過guiplan一鍵插入一個表格模版，

【html基礎】原生表格一鍵搭建，一鍵生成程式碼

可以看原始碼如下：

        <tr id="g419fe">

            <th id="g16b02">th標頭

            </th>

            <th id="gaae0b" class="  u7959f">th標頭

            </th>

            <th id="gd78bc">th標頭

            </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>

    其中表格標籤裡還含有tr標籤，th標籤，td標籤。tr標籤則表示一行，td標籤則表示行裡的每一列，而th標籤則表示表格的頭部標題，th標籤除了表示與現實頭部標題以外，還有一個很重要的作用就是它可以控制對應列裡寬度，這樣如果發現內容顯示不全的情況下，我們就可以在guiplan裡拖拽th標籤的寬度即可。

【html基礎】原生表格一鍵搭建，一鍵生成程式碼

    表格除了這些子元素以外，表格還自帶屬性。當然這些屬性我們也記不住，去查文件效率又太低。我們可以繼續透過guiplan一鍵插入屬性即可，比如給表格新增邊框，只需要選中邊框然後插入進來即可。

【html基礎】原生表格一鍵搭建，一鍵生成程式碼

【html基礎】原生表格一鍵搭建，一鍵生成程式碼

    當然邊框也有很多屬性，以上是內側邊框與外側邊框一起顯示的效果，下一章講解表格的其他屬性。最後附上生成之後的原始碼
        <tr id="g419fe">

            <th id="g16b02">th標頭

            </th>

            <th id="gaae0b">th標頭

            </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">上海浦東虹橋某某小區某某地點

            </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>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章