Attempting to use list elements in HTML to generate a table

Question

Attempting to use list elements in HTML to generate a table

I am having trouble creating a table that looks like this. I have never made a table like this before and would appreciate any guidance on how to achieve this style. Please help me out! All suggestions are welcome.

Below is the code snippet that I plan to use:

<html>
<body>
<style>
li{
border:1px solid black;
text-align:center;
}
</style>
   <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>

The image below will provide a visual of the desired output for better understanding.

html css

Answer 1

Answer №1

One way to create a table layout from a list is by enclosing the list in a div and applying the following CSS:

<div class="table">
   <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
    <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
  </div>

CSS

.table {
  display:table;
  width:100%;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
}
.table ul
{
  list-style:none;
  margin:0;
  padding:0;
  display:table-row;

}
.table ul li {
  display:table-cell;
  text-align:center;
   border-bottom:1px solid #ddd;
   border-right:1px solid #ddd;
  padding:2px 4px;
}

Check out the live demo here.

Answer 2

One way to create a table layout from a list is by enclosing the list in a div and applying the following CSS:

<div class="table">
   <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
    <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
  </div>

CSS

.table {
  display:table;
  width:100%;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
}
.table ul
{
  list-style:none;
  margin:0;
  padding:0;
  display:table-row;

}
.table ul li {
  display:table-cell;
  text-align:center;
   border-bottom:1px solid #ddd;
   border-right:1px solid #ddd;
  padding:2px 4px;
}

Check out the live demo here.

Answer 3

Answer №2

html

<body>
    <table border="1">
        <tr><th>row1</th><th>row2</th></tr>
        <tr><td>
           <ul>
              <li>Field 1</li>
              <li>Field 2</li>
              <li>Field 3</li>
           </ul></td>
            <td>X</td>
        </tr>
        <tr><td>
           <ul>
              <li>Field 1</li>
              <li>Field 2</li>
              <li>Field 3</li>
           </ul></td>
            <td>X</td>
        </tr>

</body>

css

li{
    display: block;
    float: left;
}

ul {
    list-style: none outside none;
}

EDIT: check out this link on jsfiddle

Answer 4

html

<body>
    <table border="1">
        <tr><th>row1</th><th>row2</th></tr>
        <tr><td>
           <ul>
              <li>Field 1</li>
              <li>Field 2</li>
              <li>Field 3</li>
           </ul></td>
            <td>X</td>
        </tr>
        <tr><td>
           <ul>
              <li>Field 1</li>
              <li>Field 2</li>
              <li>Field 3</li>
           </ul></td>
            <td>X</td>
        </tr>

</body>

css

li{
    display: block;
    float: left;
}

ul {
    list-style: none outside none;
}

EDIT: check out this link on jsfiddle

Answer 5

Answer №3

One way to organize your list items is by using nested ol and ul, as shown in the example below:

Example:

<ol class="table-list">
  <li>
    <ul class="table-list__inner">
      <li>Apples<span class="table-list__close">&times;</span></li>
      <li>Red<span class="table-list__close">&times;</span></li>
    </ul>
  </li>
  <li>
    <ul class="table-list__inner">
      <li>Bananas<span class="table-list__close">&times;</span></li>
      <li>Yellow<span class="table-list__close">&times;</span></li>
    </ul>
  </li>
</ol>

CSS Styling:

.table-list li {
  min-height: 70px;
  border: 1px solid gray;
  border-bottom-width: 0;
  position: relative;
}

.table-list li:last-child {
  border-bottom-width: 1px;
}

.table-list__inner {
  list-style: none;
  padding-left: 0;
}

.table-list__inner li {
  border-width: 0;
  border-bottom-width: 1px;
}

.table-list__inner li:last-child {
  border: 0;
}

.table-list__close {
  float: right;
  padding: 0.5em;
}

This structure can be effectively used with ngRepeat for AngularJS applications.

Answer 6

One way to organize your list items is by using nested ol and ul, as shown in the example below:

Example:

<ol class="table-list">
  <li>
    <ul class="table-list__inner">
      <li>Apples<span class="table-list__close">&times;</span></li>
      <li>Red<span class="table-list__close">&times;</span></li>
    </ul>
  </li>
  <li>
    <ul class="table-list__inner">
      <li>Bananas<span class="table-list__close">&times;</span></li>
      <li>Yellow<span class="table-list__close">&times;</span></li>
    </ul>
  </li>
</ol>

CSS Styling:

.table-list li {
  min-height: 70px;
  border: 1px solid gray;
  border-bottom-width: 0;
  position: relative;
}

.table-list li:last-child {
  border-bottom-width: 1px;
}

.table-list__inner {
  list-style: none;
  padding-left: 0;
}

.table-list__inner li {
  border-width: 0;
  border-bottom-width: 1px;
}

.table-list__inner li:last-child {
  border: 0;
}

.table-list__close {
  float: right;
  padding: 0.5em;
}

This structure can be effectively used with ngRepeat for AngularJS applications.

Answer 7

Answer №4

Check out this JSFIDDLE that is a bit complex but very close to what you need.

<div>
  <ul>
    <li class="fourth">x</li>
    <li class="third"><span class="icon">P</span> Text <span class="arrow">&#9660;</span></li>
    <li class="second">1</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third small">Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">P</span> Text <span class="arrow">&#9660;</span></li>
    <li class="second">2</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

  </ul>

</div>


div {
  width: 470px;
  font-family: Verdana;
  font-size: 14px;
  letter-spacing: 1px;
  color: #222;
}
ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: right;
  height: 35px;
  margin: -1px 0 0 -1px;
  padding-top: 15px;
  text-align: center;
  border: 1px solid #999;
}
.clear {
  width: 72px;
  border: none;
}
.first {
  width: 20px;
}
.second {
  width: 50px;
}
.third {
  width: 350px;
  padding-left: 10px;
  text-align: left;
}
.arrow {
  float: right;
  margin-right: 5px;
}
.icon {
  background: #333;
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 18px;
  color: #fff;
}
.arrow:hover,
.fourth:hover {
  color: #555;
  cursor: pointer;
}
.fourth {
  width: 35px;
  clear: right;
}

Results:

Answer 8

Check out this JSFIDDLE that is a bit complex but very close to what you need.

<div>
  <ul>
    <li class="fourth">x</li>
    <li class="third"><span class="icon">P</span> Text <span class="arrow">&#9660;</span></li>
    <li class="second">1</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third small">Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">P</span> Text <span class="arrow">&#9660;</span></li>
    <li class="second">2</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

  </ul>

</div>


div {
  width: 470px;
  font-family: Verdana;
  font-size: 14px;
  letter-spacing: 1px;
  color: #222;
}
ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: right;
  height: 35px;
  margin: -1px 0 0 -1px;
  padding-top: 15px;
  text-align: center;
  border: 1px solid #999;
}
.clear {
  width: 72px;
  border: none;
}
.first {
  width: 20px;
}
.second {
  width: 50px;
}
.third {
  width: 350px;
  padding-left: 10px;
  text-align: left;
}
.arrow {
  float: right;
  margin-right: 5px;
}
.icon {
  background: #333;
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 18px;
  color: #fff;
}
.arrow:hover,
.fourth:hover {
  color: #555;
  cursor: pointer;
}
.fourth {
  width: 35px;
  clear: right;
}

Results:

Attempting to use list elements in HTML to generate a table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

Exploring the World of Html

tips for adding text to an input field after it has been submitted

Can you provide me with instructions on how to create a toggle effect for a button using vanilla JavaScript?

What is the best way to remove the background transparency of an image?

The size of jVectorMap is displayed too diminutive

How can you horizontally align a collection of elements using CSS?

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

"Vertical Line Encoding: A Strategy for Improved Data

Determining the number of columns and rows within an HTML table

Is it possible to animate CSS Grid components?

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Tips for achieving a background animation similar to the one shown on this page

Tips for defining types for specific CSS properties in TypeScript, such as variables

Limit the radio button to being clickable

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

Chat box custom scrollbar always positioned at the bottom

Expanding the width of three floating divs in the center to match the width of the parent container div

jQuery navigation is experiencing issues due to conflicting buttons