Jump to content
B.Brown2080

Creating a Table of Images

Recommended Posts

Hello All,

I'm trying to create a table of images in which each image would be a different link to a product on our website.

I'm just learning how to code so I appreciate any help you can give!

Attached is pdf showing the general layout of what I'm trying to do.

 

Thanks!

Line Card 10-16-18.pdf

Share this post


Link to post
Share on other sites

You have a few ways to do this, but the easiest way is to use the <table> and corresponding tags. Take a look at this tutorial.

https://www.w3schools.com/html/html_tables.asp

If you add <img> tags instead of text, and style appropriately, you should get something similar to the PDF you've attached.

Share this post


Link to post
Share on other sites

You Can user Bootstrap To Make It easy , here is something that i made using bootstrap that might help you to create what you want.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>YourTv</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Fmovies.css">

    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <div class="card">
        <div class="card-header">
        <a href="https://fmovies.wtf/" class="badge badge-Info" style="font-size: 24px; text-decoration: none;">YourTv</a> </div>
          <ul class="link">
        <li>
          <a href="https://fmovies.wtf/home"   class="badge badge-dark">Home</a>
        </li>
        <li>
          <a href="https://fmovies.wtf/az-list" class="badge badge-dark">A-Z List</a>
        </li>
        <li>
          <a href="https://fmovies.wtf/movies" class="badge badge-dark">Movies</a>
        </li>
        <li>

          <a href="https://fmovies.wtf/tv-series" class="badge badge-dark">Tv-Series</a>
        </li>
        <li> 
          <a href="https://fmovies.wtf/most-watched" class="badge badge-dark">Most Watched</a>
        </li>
        </ul>
        </div>
    </div><br/>
    <div class="container">
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/GOT.jpg" class="img-fluid" title="Game Of Thrones" alt="GOT"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/Money.png" class="img-fluid" title="Money Heist" alt="Money Heist"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/Stranger.png" title="Stranger Things" class="img-fluid" alt="Stranger Things"></a>
            </div>
        </div>
        <div class="row"> 
            <div class="col-12">
                <br/>
            </div></div>
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/black.png" class="img-fluid" title="Black Mirror" title="Game Of Thrones" alt="Black Mirror"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/vikings.jfif" class="img-fluid"  style="height: 220px;" title="vikings" alt="vikings"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/sherlock.jfif" title="Sherlock" style="height: 220px; width: 400px;" class="img-fluid"  alt="Sherlock"></a>
            </div>
        </div>
        <div class="row"> 
            <div class="col-12">
                <br/>
            </div></div>
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/13reason.jfif" class="img-fluid" title="Black Mirror" style="height: 220px; width: 400px;" title="13 Reason Why" alt="GOT"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/friends.jfif" class="img-fluid"  style="height: 220px; width: 400px;" title="Friends" alt="Friends"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/see.jpg" title="See" style="height: 220px; width: 400px;" class="img-fluid"  alt="See"></a>
            </div>
        </div>
    </div>
    <footer class="card-footer text-center"style="color:white">This Page  reffers To Fmovies!</footer>

</body>
</html>

here is a ss for your use ,

You Can re-adjust code for color and contain as you like

Screenshot (12).png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...