<big id="fg4qc"></big>

  • <strike id="fg4qc"></strike><th id="fg4qc"><option id="fg4qc"></option></th>

      <tr id="fg4qc"></tr>

            當前位置:網站首頁 / 建站知識 / 網站制作知識

            網站制作中表格標簽的使用

            來源:未知時間:2015-04-04 16:33點擊:

            在網站制作中,表格是個很常用的東西(以前),在早期的網頁中,表格可不單單是用來展示數據那么簡單,它是只用來做網頁布局的框架使用。表格代碼:

            <table>
            <tr>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            <tr>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            </table>

            其中,table 標簽圈定表格,然后 tr 標簽圈定行,td 則標記行中的單元格。所以,上述代碼是一個表格中有兩行,每行三個單元格(三列)。本來想展示一下效果,但是看看還是算了,上述代碼什么都沒顯示出來……(要明白沒有顯示可不代表沒有東西哦)。

            我們還是繼續做點什么吧,給他們調價一些添加一些屬性和內容再看看。當然,如下代碼大家最好還是復制到編輯器里代碼高亮了再看。

            <table border="1">
            <tr height="120">
            <td width="200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, harum, consectetur libero itaque perferendis <td width="200">Placeat, nulla animi vel repellendus omnis velit odio delectus accusantium optio vitae voluptate error neque culpa <td width="200">Eius, necessitatibus similique recusandae fugiat? Consequuntur, accusantium, vitae, totam, hic officiis beatae </tr>
            <tr height="120">
            <td width="200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, itaque nulla fuga quibusdam reiciendis officiis <td width="200">Odio, saepe, earum, quam impedit ullam minus quasi fuga iusto omnis quisquam tempore libero adipisci doloremque <td width="200">Odit, sit, ratione, laudantium eveniet iusto cumque ad reiciendis enim inventore molestias itaque magnam animi. </tr>
            </table>

            上述代碼我做了什么?

            給表格(table)邊框(border)設定了寬度(1);
            給行(tr)設置了高度(height);
            給單元格(或者說是列,td)設置了寬度(width);

            在每個單元格里寫了一些文字,文字沒有意義,就是用來展示效果。然后他的效果是:

            網站制作表格標簽效果展示

            這樣的表格跟我們對他的預期差不多了。當然不不設置表格邊框寬度,或者設置為 0,那么我們則只能看到其中的內容,卻看不到表格邊框,這就起到了布局的作用,通過設置行和單元格的寬高來控制內容出現的位置。那么我們再舉一個例子,代碼如下:

            <table>
            <tr height="120">
            <td width="200"></td>
            <td width="200">我在你上面,歐也~</td>
            <td width="200"></td>
            </tr>
            <tr height="120">
            <td width="200"></td>
            <td width="200">看看我在哪里?</td>
            <td width="200"></td>
            </tr>
            </table>

            這個代碼應該很好理解了,我不解釋,咱們看看效果。

            網站制作表格標簽布局效果

            用表格布局就是如此,當然還可以嵌套,比如在一個單元格里再放入一個表格,然后……亂到不想看。這里只是介紹一種歷史中的東西,我們將來要學的是 div+css 布局,要比表格好的多。
            然后如果一個有兩行,第一行三列,第二行兩列怎么寫?像下邊這樣?

            <table>
            <tr>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            <tr>
            <td></td>
            <td></td>
            </tr>
            </table>

            那是不對滴~不過想了想我們為什么搞把事情搞那么復雜呢?以后學了 div+css 大部分事情你都不會喜歡去用表格的。真到需要的時候復雜的表格還是用 Dreamweaver 之類可視化編輯器去搞的好,反正我是不回去手寫復雜的表格的。所以,嘿嘿,關于表格我們就講到這里,想深入研究就用 DW 去試試,然后看看他生成的代碼好了。

            天天爱天天看人人视频_一日本道在线不卡视频_人人澡人人澡人人看_久久超碰国产精品最新