We all know a lot of content editor (TinyMCE Editor, FCK) have inserted the table function, fast and convenient, but the use of these tables <table> tags, you can view the HTML source code can be found that the table tag is not very friendly to the search engine, Table too many words may not be included in SE, there is no way to use other methods to achieve the drawing table? For example, with <dl> tags?
<dl> tags are definition lists (definition list), combine <dt> (define items in list) and <dd> (describe items in list), and set them as peer displays to achieve the effect of the table, as shown in
Define CSS style, float:left; For your peers, if you have too much text, you can set the height of DD to avoid uneven table borders
<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>
The HTML code is as follows
<body>
<DLID= "First"><DT>Menu1</DT><DD>Text11</DD><DD>Text12</DD><DD>Text13</DD><DD>Text14</DD></DL><DLID= "Second"><DT>Menu2</DT><DD>Text21</DD><DD>Text22</DD><DD>Text23</DD><DD>Text24</DD></DL><DLID= "Third"><DT>Menu3</DT><DD>Text31</DD><DD>Text32</DD><DD>Text33</DD><DD>Text34</DD></DL><DLID= "Fourth"><DT>Menu4</DT><DD>Text41</DD><DD>Text42</DD><DD>Text43</DD><DD>Text44</DD></DL>
</body>
How to use <dl> tags to make tables without table labels
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
