Jump to content

Creating a Table of Images


B.Brown2080
 Share

Recommended Posts

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.

Link to comment
Share on other sites

  • 7 months later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...