Question 342357 in Html Question posted in
Some basic documentation can be found here.

html css How create list with <a>links like table

List is <a> links with some elements inside <a>. All <a> links to internal website pages. How to make it look like a table? Is it possible?

Thumbnail column Term column Description column
thumbnail_1 term_1 description_1
thumbnail_2 term_2 description_2 
  <ul>
    <li>
      <div>thumbnail column</div>
      <div>term column</div>
      <div>description column</div>
    </li>
    <li>
      <a href="link_1">
        <img src="src_thumbnail_1" alt="thumbnail_1">
        <div>term_1</div>
        <div>description_1</div>
      </a>
    </li>
    <li>
      <a href="link_2">
        <img src="src_thumbnail_2" alt="thumbnail_2">
        <div>term_2</div>
        <div>description_2</div>
      </a>
    </li>
  </ul>
Tags:

2

Answers


  1. 0 
    <html>
 <head>
            <style> 
                ul {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                }
                
                ul li a {
                    width: 200px;
                }
                
                ul li {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                }
                
                ul li.body {
                    align-items: center;
                }
                
                ul li.body img {
                    width: 100px;
                    height: 100px;
                }
                
            </style>
        </head>
        <body>
            <ul> 
                <li class="header">
                    <a>thumbnail column</a>
                    <a>term column</a>
                    <a>description column</a>
                </li>
                <li class="body">
                    <a><img src="" alt="thumbnail_1"></a>
                    <a>term_1</a>
                    <a>description_1</a>
                </li>
                <li class="body">
                    <a><img src="" alt="thumbnail_2"></a>
                    <a>term_2</a>
                    <a>description_2</a>
                </li>
            </ul>
        </body>
        </html>
    Login or Signup to reply.
  2. 0

    To give your layout a table look one solution is too use the table th and td elements on your current html.

    For more info check table

    This will give you the basic structure for your table. To give the table a visual look of a basic table, you could use CSS. For example, adding border: 1px solid #ddd; to your table cells will give it the look of lines inside a table.

    The results will be something like this:

    table {
    border-collapse: collapse;
    width: 100%;
  }
  
    th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
    <table>
  <thead>
    <tr>
      <th>Thumbnail column</th>
      <th>Term column</th>
      <th>Description column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="link_1">
          <img src="src_thumbnail_1" alt="thumbnail_1">
        </a>
      </td>
      <td>term_1</td>
      <td>description_1</td>
    </tr>
    <tr>
      <td>
        <a href="link_2">
          <img src="src_thumbnail_2" alt="thumbnail_2">
        </a>
      </td>
      <td>term_2</td>
      <td>description_2</td>
    </tr>
  </tbody>
</table>

    From this point on you can customize your table look farther.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search