如何用<dl>标签做表格而不用table标签
生活随笔
收集整理的這篇文章主要介紹了
如何用<dl>标签做表格而不用table标签
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們都知道很多的內容編輯器(TinyMCE編輯器、fck)都有插入表格功能，快速方便，但是這些表格用到的<table>標簽，可以查看html源代碼就能發(fā)現(xiàn)，table標簽對搜索引擎不是很友好，table太多話可能無法被SE收錄，有沒辦法用其他方法來實現(xiàn)繪制表格呢？比如用<dl>標簽？
<dl> 標簽是定義列表（definition list），結合<dt>（定義列表中的項目）和<dd>（描述列表中的項目），并將它們設置為同行顯示就能實現(xiàn)表格的效果，如下圖所示
定義一下css樣式，float:left; 為同行顯示，如果文字太多，可以設置dd的高度height，避免表格邊框參差不齊
<style>
dl{float:left;margin: 0px auto;border:1px solid #ccc;width:100px;} dt{ font-weight:bold; color:blue; height:1.5em; padding-left:5px;} dd{margin:auto;border-top:1px solid #ccc; padding-left:5px;}
</style>
html代碼如下
<body>
<dl id="first"> <dt>menu1</dt> <dd>text11</dd> <dd>text12</dd> <dd>text13</dd> <dd>text14</dd> </dl> <dl id="second"> <dt>menu2</dt> <dd>text21</dd> <dd>text22</dd> <dd>text23</dd> <dd>text24</dd> </dl> <dl id="third"> <dt>menu3</dt> <dd>text31</dd> <dd>text32</dd> <dd>text33</dd> <dd>text34</dd> </dl> <dl id="fourth"> <dt>menu4</dt> <dd>text41</dd> <dd>text42</dd> <dd>text43</dd> <dd>text44</dd> </dl>
</body>
總結
以上是生活随笔為你收集整理的如何用<dl>标签做表格而不用table标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本外接2-3个屏幕
- 下一篇： 微博APP如何设置自动回复私信(微博搜索