Style list like a table in CSS

Use CSS List instead of Table Tag

Table tag is not recommended. It takes a time to load. This article shows how to tabulate your items with ul and li.

Show items horizontally.


li {display:inline-block;} enables list items to be arranged horizontally.

<!DOCTYPE html>
<html>
<head><style>
li {display:inline-block;}
</style></head>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

</body>
</html>

Arrange vertical lines

Set width  for each list item like li {width:100px;}

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {vertical-align:middle;}
li {display:inline-block;margin:10px;width:100px}

</style>
</head>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none" id="menu">
  <li>Coffee</li>
  <li>Tea is nice</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none" id="menu">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Optional: newline in a cell

display:inline-block makes newline . Also, vetical-align: middle makes row center vertically.

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {vertical-align:middle;}
li {display:inline-block;margin:10px;width:100px}
div.newline {display:block;}
</style>
</head>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none" id="menu">
  <li>Coffee</li>
  <li>---------Tea
<div class="newline">aaaa</div></li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none" id="menu">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 
</body>
</html>

Bibliography

コメント