Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Wanting to draw a table with both vertical and horizontal lines (defined from svg images)

Edrol97

Edrol97

Silver Coder
Hi all,

I've got the current page of my shop which sends an email to me if anyone ever wants to order something. The table has two images of lines (svgs) stated in the code but only one of them displays. How do I ensure both lines display in the direction they should be to form a table?

Thanks,

Eliot
 
Sort by date Sort by votes
Edrol97 said:
Hi all,

I've got the current page of my shop which sends an email to me if anyone ever wants to order something. The table has two images of lines (svgs) stated in the code but only one of them displays. How do I ensure both lines display in the direction they should be to form a table?

Thanks,

Eliot
Click to expand...

I believe you could do something like;

HTML: 
<img src="line.svg" class="vertical-line" alt="vertical line">


CSS: 
.vertical-line {
  transform: rotate(90deg);
  display: block;
}

You can also have lines from the <table> code as well and utilize CSS to get lines too.


CSS: 
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

I hope this helps. If you run into any other issues please let us know, and we can try to figure out a fix.
 
Upvote 0 Downvote
JimmysNetwork said:
I believe you could do something like;

HTML: 
<img src="line.svg" class="vertical-line" alt="vertical line">


CSS: 
.vertical-line {
  transform: rotate(90deg);
  display: block;
}

You can also have lines from the <table> code as well and utilize CSS to get lines too.


CSS: 
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

I hope this helps. If you run into any other issues please let us know, and we can try to figure out a fix.
Click to expand...
How would I input this? So far my code looks like this for the page, but I'm not sure how I would input it based on your suggestions.


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="Grauniad.css" />
    <!--<link rel="stylesheet" href="mainstyle.css"/>-->
    <title>Sklep</title>
    <link
      rel="icon"
      type="image/x-icon"
      href="img/background/Grauniad%20Favicon.png"
    />
  </head>
  <body>
    <div class="topnav">
      <a style="color: white; font-size: 3dvh;" href="Grauniad.html"
        ><!--Why, hello there! Take a look around- come on! Don't be shy! -->
        Hallo end walcome ta anuther nows sate yo nevar asced fur!</a
      >
      <div class="topnavright">
        <a href="mailto:[email protected]">Contakt uz</a>
      </div>
    </div>
    <header class="topnavbar">
      <div class="logo">
        <img src="img/background/The Grauniad logo.png" width="15%" />
      </div>
      <nav>
        <div class="navbox">
          <div class="title">Neus providor auf tha yaer</div>
          <a class="Home" href="Hi.html">Hume</a>
          <a href="about_me.html">Abot</a> <a href="Art.html">Arc</a>
          <a href="cv.html">Wurk</a>
          <a href="Games.html">Pley</a>
          <a href="Grauniad.html">Nus</a>
        </div>
        <br />
      </nav>
    </header>

    <div class="main" style="background-color: white; padding-top: 10px;">
      <h1 style="font-size: 2.4vw; padding-left: 5%; padding-right: 5%;">
        If you like my work, contact me at
        <a href="mailto:[email protected]?subject=I%20want%20to%20buy%20some%20artwork&body=Hello%20Eliot%2C%0A%0AI%20would%20like%20to%20buy%20some%20artwork%20from%20you.%20Please%20could%20you%20send%20me%20some%20more%20information%20on%20the%20following%3A%0A%0A1.%20The%20name%20of%20the%20piece%20you%20want%20to%20buy%0A2.%20The%20size%20of%20the%20piece%20you%20want%20to%20buy%0A3.%20The%20price%20of%20the%20piece%20you%20want%20to%20buy%0A4.%20The%20address%20you%20want%20the%20piece%20sent%20to%0A5.%20Any%20other%20information%20you%20think%20I%20might%20need%20to%20know%0A%0AThank%20you%20very%20much%2C%0A%0A[Your%20Name]">
          [email protected]</a
        >
        with the information for the piece you want! Note: originals are often uncoloured but may be coloured on request. Postage additional on any orders. Payment via Bank Transfer.
      </h1>

      <style>
        #borderimg {
          border-image: url(img/background/Squiggly%20lines%20fortable.png) 30 round;
        }
        table{
          width: 600px;
          border-image: url(/img/background/SQUARE.svg);
          /*border: 3px solid black;*/
          
          td{
            height: 35px;
            padding: 0;
            text-align: center;
          }
        }
        .rule_rowspan{
          & img{
            display: block;
            height: 175px;
          }
        }
        .rule_colspan{
          & img{
            display: block;
          }
        }
      </style>
<!---------------------------------------------------------------------->
      <table cellspacing="0">
        <tbody>
          <td colspan="20" class="rule_colspan"><div id="borderimg"></div></td>
          <tr>
          
            <th>Piece type</th>
            <th>Size</th>
            <th>Price (£)</th>
          </tr>
          <tr rowspan="2" width="20px" class="rule_rowspan"><img src="img/background/SVG/Asset 2.svg" alt=""></tr>
            <td colspan="12" width="20px" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A3</td>
              <td>400</td></tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A4</td>
              <td>300</td>
            </tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A5</td>
              <td>200</td></tr>
              <td colspan="15" width="20px" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
          <td>Original</td>
          <td>A3</td>
          <td>250</td></tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <tr>
          <td>Original</td>
          <td>A4</td>
          <td>200</td>
        </tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <tr>
          <td>Original</td>
          <td>A5</td>
          <td>150</td></tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A3</td>
            <td>150</td>
          </tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A4</td>
            <td>100</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A5</td>
            <td>75</td>
          </tr>
          <tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          </tr>
          <tr>
            <td>10 Postcards</td>
            <td>A6</td>
            <td>£15</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Postcard</td>
            <td>A6</td>
            <td>£2</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Badge</td>
            <td>77mm</td>
            <td>£2</td>
          </tr>
        </tbody>
      </table>



      <iframe
        style="bottom: 100%"
        src="https://ko-fi.com/houseoflordillustration"
        width="100%"
        height="600px"
      ></iframe>
    </div>
    <footer id="Graun" style="background-color: #062962; font-family: Guardian Heavy;">
      <div class="topfoot">
        <h1 style="color: white; font-family: Guardian; font-size: 3dvh;" >With Apologies to The Guardian<a href="Hi.html">&#169 Eliot Lord</a></h1>
        <div class="box">
          <a href="Hi.html">Homme</a> <a href="about_me.html">Aboot</a
          ><a href="Art.html">Arf</a> <a href="cv.html">Werk</a>
          <a href="Games.html">Ploy</a>
          <a href="Inspa.html">Inspar</a><a href="Inspa.html"></a>
        </div>
      </div>
    </footer>
  </body>
</html>
 
Upvote 0 Downvote
Edrol97 said:
How would I input this? So far my code looks like this for the page, but I'm not sure how I would input it based on your suggestions.


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="Grauniad.css" />
    <!--<link rel="stylesheet" href="mainstyle.css"/>-->
    <title>Sklep</title>
    <link
      rel="icon"
      type="image/x-icon"
      href="img/background/Grauniad%20Favicon.png"
    />
  </head>
  <body>
    <div class="topnav">
      <a style="color: white; font-size: 3dvh;" href="Grauniad.html"
        ><!--Why, hello there! Take a look around- come on! Don't be shy! -->
        Hallo end walcome ta anuther nows sate yo nevar asced fur!</a
      >
      <div class="topnavright">
        <a href="mailto:[email protected]">Contakt uz</a>
      </div>
    </div>
    <header class="topnavbar">
      <div class="logo">
        <img src="img/background/The Grauniad logo.png" width="15%" />
      </div>
      <nav>
        <div class="navbox">
          <div class="title">Neus providor auf tha yaer</div>
          <a class="Home" href="Hi.html">Hume</a>
          <a href="about_me.html">Abot</a> <a href="Art.html">Arc</a>
          <a href="cv.html">Wurk</a>
          <a href="Games.html">Pley</a>
          <a href="Grauniad.html">Nus</a>
        </div>
        <br />
      </nav>
    </header>

    <div class="main" style="background-color: white; padding-top: 10px;">
      <h1 style="font-size: 2.4vw; padding-left: 5%; padding-right: 5%;">
        If you like my work, contact me at
        <a href="mailto:[email protected]?subject=I%20want%20to%20buy%20some%20artwork&body=Hello%20Eliot%2C%0A%0AI%20would%20like%20to%20buy%20some%20artwork%20from%20you.%20Please%20could%20you%20send%20me%20some%20more%20information%20on%20the%20following%3A%0A%0A1.%20The%20name%20of%20the%20piece%20you%20want%20to%20buy%0A2.%20The%20size%20of%20the%20piece%20you%20want%20to%20buy%0A3.%20The%20price%20of%20the%20piece%20you%20want%20to%20buy%0A4.%20The%20address%20you%20want%20the%20piece%20sent%20to%0A5.%20Any%20other%20information%20you%20think%20I%20might%20need%20to%20know%0A%0AThank%20you%20very%20much%2C%0A%0A[Your%20Name]">
          [email protected]</a
        >
        with the information for the piece you want! Note: originals are often uncoloured but may be coloured on request. Postage additional on any orders. Payment via Bank Transfer.
      </h1>

      <style>
        #borderimg {
          border-image: url(img/background/Squiggly%20lines%20fortable.png) 30 round;
        }
        table{
          width: 600px;
          border-image: url(/img/background/SQUARE.svg);
          /*border: 3px solid black;*/
         
          td{
            height: 35px;
            padding: 0;
            text-align: center;
          }
        }
        .rule_rowspan{
          & img{
            display: block;
            height: 175px;
          }
        }
        .rule_colspan{
          & img{
            display: block;
          }
        }
      </style>
<!---------------------------------------------------------------------->
      <table cellspacing="0">
        <tbody>
          <td colspan="20" class="rule_colspan"><div id="borderimg"></div></td>
          <tr>
         
            <th>Piece type</th>
            <th>Size</th>
            <th>Price (£)</th>
          </tr>
          <tr rowspan="2" width="20px" class="rule_rowspan"><img src="img/background/SVG/Asset 2.svg" alt=""></tr>
            <td colspan="12" width="20px" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A3</td>
              <td>400</td></tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A4</td>
              <td>300</td>
            </tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
            <tr>
              <td>Redraw</td>
              <td>A5</td>
              <td>200</td></tr>
              <td colspan="15" width="20px" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
          <td>Original</td>
          <td>A3</td>
          <td>250</td></tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <tr>
          <td>Original</td>
          <td>A4</td>
          <td>200</td>
        </tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <tr>
          <td>Original</td>
          <td>A5</td>
          <td>150</td></tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A3</td>
            <td>150</td>
          </tr>
        <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A4</td>
            <td>100</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Giclée Print</td>
            <td>A5</td>
            <td>75</td>
          </tr>
          <tr>
            <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          </tr>
          <tr>
            <td>10 Postcards</td>
            <td>A6</td>
            <td>£15</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Postcard</td>
            <td>A6</td>
            <td>£2</td>
          </tr>
          <td colspan="15" class="rule_colspan"><img src="img/background/SVG/Asset 2.svg" alt=""></td>
          <tr>
            <td>Badge</td>
            <td>77mm</td>
            <td>£2</td>
          </tr>
        </tbody>
      </table>



      <iframe
        style="bottom: 100%"
        src="https://ko-fi.com/houseoflordillustration"
        width="100%"
        height="600px"
      ></iframe>
    </div>
    <footer id="Graun" style="background-color: #062962; font-family: Guardian Heavy;">
      <div class="topfoot">
        <h1 style="color: white; font-family: Guardian; font-size: 3dvh;" >With Apologies to The Guardian<a href="Hi.html">&#169 Eliot Lord</a></h1>
        <div class="box">
          <a href="Hi.html">Homme</a> <a href="about_me.html">Aboot</a
          ><a href="Art.html">Arf</a> <a href="cv.html">Werk</a>
          <a href="Games.html">Ploy</a>
          <a href="Inspa.html">Inspar</a><a href="Inspa.html"></a>
        </div>
      </div>
    </footer>
  </body>
</html>
Click to expand...

Replace your current table block with this and it should fix your issues:


HTML: 
<table class="price-table">
  <thead>
    <tr>
      <th>Piece type</th>
      <th>Size</th>
      <th>Price (£)</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Redraw</td><td>A3</td><td>400</td></tr>
    <tr><td>Redraw</td><td>A4</td><td>300</td></tr>
    <tr><td>Redraw</td><td>A5</td><td>200</td></tr>
    <tr><td>Original</td><td>A3</td><td>250</td></tr>
    <tr><td>Original</td><td>A4</td><td>200</td></tr>
    <tr><td>Original</td><td>A5</td><td>150</td></tr>
    <tr><td>Giclée Print</td><td>A3</td><td>150</td></tr>
    <tr><td>Giclée Print</td><td>A4</td><td>100</td></tr>
    <tr><td>Giclée Print</td><td>A5</td><td>75</td></tr>
    <tr><td>10 Postcards</td><td>A6</td><td>£15</td></tr>
    <tr><td>Postcard</td><td>A6</td><td>£2</td></tr>
    <tr><td>Badge</td><td>77mm</td><td>£2</td></tr>
  </tbody>
</table>

<style>
.price-table {
  width: 600px;
  border-collapse: collapse;
}
.price-table th,
.price-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  text-align: center;
}
.price-table thead th {
  background: #f5f5f5;
}
</style>
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom