关于前端:html基础原生表格一键搭建一键生成代码

26次阅读

共计 2104 个字符,预计需要花费 6 分钟才能阅读完成。

在咱们做网页当中常常要用到表格,当然也有人会抉择用 div 来绘制一个表格。而用 div 绘制会存在诸多问题,而且也不不便保护。所以表格标签也是咱们前端开发必备的技能。

    咱们先通过 guiplan 一键插入一个表格模版,

如果看不懂能够看源代码如下:

<table id="g570b4">
            <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 标签的宽度即可。

    表格除了这些子元素以外,表格还自带属性。当然这些属性咱们也记不住,去查文档效率又太低。咱们能够持续通过 guiplan 一键插入属性即可,比方给表格增加边框,只须要选中边框而后插入进来即可。

  当然边框也有很多属性,以上是内侧边框与外侧边框一起显示的成果,下一章解说表格的其余属性。最初附上生成之后的源代码

<table id="g570b4" border="1">
            <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>
<style>
.u5899e {width: 162px;}
</style>

正文完
 0