All geek questions in one place

Using <li> instead of <table>

Please explain to me how I can simulate this structure.

<table> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table>

using the <li> ?

I need to do this without using <table> at all.

+5
source share
6 answers

This can be done using CSS. Example:

 <html> <body> <ul style="list-style: none outside none;"> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> </ul> </body> </html>
+12
source

Here is a classic article that most likely explains what you need to do: http://www.alistapart.com/articles/taminglists/

+3
source

Due to the fact that I use my Nokia phone, I will have no links to justify what I say.

First you need to learn the Cascading StyleSheet (or CSS) and create a table-like structure using the HTML <ul> and <li> elements.

There are many tutorials that show you this, just visit your friend, Google. :-)

+1
source

You might be looking for a list:

 <dl> <dt>Column1</dt> <dd>Column2</dd> <dt>Column1</dt> <dd>Column2</dd> <dt>Column1</dt> <dd>Column2</dd> </dl>

style:

 dt, dd {float: left; display: block; width: 50%} dt {clear: left;}

See this example on jsFiddle

+1
source

The following works, at least with Opera. But this is no different than using tables.

 <html> <head> <title>Test</title> <style> .tablelike { display: table; } .tablelike li { width:50%; display:table-cell; } </style> </head> <body> <ul class="tablelike"> <li>Column 1</li> <li>Column 2</li> </ul> </body> </html>
0
source

The question is fuzzy, but if you want a table-like structure to use list items, then you might want to use definition lists — they allow you to use a richer data structure than regular lists. The <dt> elements take on the role of column headings with <dl> elements replacing data cells.

Sophisticated style for table layout with CSS, but it can be done.

0
source

Source: https://habr.com/ru/post/890292/

More articles:


All Articles