如何用
標簽做表格而不用table標簽


  我們都知道很多的內容編輯器(TinyMCE編輯器、fck)都有插入表格功能,快速方便,但是這些表格用到的<table>標簽,可以查看html源代碼就能發現,table標簽對搜索引擎不是很友好,table太多話可能無法被SE收錄,有沒辦法用其他方法來實現繪制表格呢?比如用<dl>標簽?

  <dl> 標簽是定義列表(definition list),結合<dt>(定義列表中的項目)和<dd>(描述列表中的項目),並將它們設置為同行顯示就能實現表格的效果,如下圖所示

用dl標簽制作表格

  定義一下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>標簽做表格收錄圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 table表格標簽的屬性 h5標簽基礎 table表格標簽 表單Form標簽和表格Table標簽 JSP:table標簽實現表格 HTML 表格:表格由 HTML中表格table標簽的實例 html5 表格標簽 table tr td html5常用標簽table表格布局 HTML中的table標簽制作表格
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM
標簽來定義 HTML: table表格標簽橫/縱向合並