How Do I Center These <tr> Tags So That They Look Straight? | Sololearn: Learn to code for FREE!

+1

How Do I Center These <tr> Tags So That They Look Straight?

To see my problem, down below is the code I used, html and css... *Note: To see my alignment problem with my table, you must have a large enough screen to view it with. That is to say, you must use a laptop or computer and paste the code into a text editor such as notepad, notepad++, sublime, etc. * *Note: I did in fact cut out a lot of my HTML, I only included the portion in concern with my table. However, I did include ALL of my CSS. If posting the rest of the HTML helps then I'll add it as well. Thanks.*

12/24/2016 6:14:36 PM

BrightAsTheStars

10 Answers

New Answer

+2

Well, I copy paste all your code in the code playground to see/test it: https://code.sololearn.com/WKFEKnmJzda4/# ( feel free to save it, it would be copied in your code playground ;) ) But I don't clearly see your problem: do you want the border of the rows containing a unique cell ( those with colspan ) to be at a smaller width than the table? If it is, you need to put a container in your cell, which have the css display property set to inline or inline-block, and decorate this container in place of your cell ( <td> -- in reality <tr>s width are necessary widely than possible in the <table> width, or <table> width straighly to the <tr>'s table; and sum of <td> width follow same principe, in regards of it's parent <tr> ) and made cell container center text

+2

Except that I have look at code playground viewer on the SoloLearn app for android, and the previsualisation is not made like on the web site: you will see at fullscreen size, all the more so I run it on a 10' UHD tablet ( so my virtual width resolution is about 1000px, your table is centered with a little comfortable margin at both side ;) )

+1

+visph Sorry for the confusion, when I said insert it in a text editor like notepad, notepad++, or sublime... it was so you could open the code in a Web browser and see it in full screen. The reason being is because the table looks perfectly fine on the small screen sololearn provides, but when you open it in a web browser in full screen, using something like a laptop, you see the disalignment in the table. But again, typing the code on SoloLearn won't allow you to see the disalignment error I'm referring too. I do thank you for your answer still though.

0

<table> <tbody> <tr> <td colspan="2"> <center><strong>How To Make Round Kreplach</strong></center> </td> </tr> <tr> <td> <strong>1.</strong> ROUNDS: On floured board roll dough out as thin as possible without tearing </td> <td class="pic"> <strong>2.</strong> Cut 3-inch circles with round cookie cutter. Place a teaspoon of filling carefully in the center. <center><img src="http://w3.chabad.org/media/images/1291.jpg"></center> </td> </tr> <tr> <td class="pic"> <strong>3.</strong> Lift sides 1-2 and 3-4 to meet in center over filling and press edges together. <center><img src="http://w3.chabad.org/media/images/1292.jpg"></center> </td> <td class="pic"> <strong>4.</strong> Fold down top of 3-4-2 to middle and pinch edges together forming a triangle. Moisten edges with tip of finger dipped in cold water to keep seams closed. <center><img src="http://w3.chabad.org/media/images/1293.jpg"></center> </td> </tr> </tbody> </table> </div> </div> </body> </html>

0

<!DOCTYPE html> <head> <title> Food </title> </head> <body> <div id="body"> <div class="inbg"> <table> <caption><strong>Illustrated Guide:</strong></caption> <tbody> <tr> <td colspan="2"> <center><strong>How To Make Square Kreplach</strong></center> </td> </tr> <tr> <td colspan="2"> <strong>1.</strong> SQUARES: On floured board roll dough out as thin as possible without tearing. </td> </tr> <tr> <td class="pic"> <strong>2.</strong> Cut rolled out dough into 3-inch squares. Place a teaspoon of filling carefully in center. <center><img src="http://w3.chabad.org/media/images/1289.jpg"></center> </td> <td class="pic"> <strong>3.</strong> Bring point 1 up to point 4 and seal edges. Moisten edges with tip of finger dipped in cold water to keep seams closed. <center><img src="http://w3.chabad.org/media/images/1290.jpg"></center> </td> </tr> </tbody> </table>

0

0

table { font-family: Georgia; font-size: 1.02em; color: maroon; background-color: transparent; padding: 0; border: .2em black; border-style: double; margin: auto; width: auto; border-spacing: .2em .5em; } caption { font-size: 1.32em; padding: .4em; border: .2em black; border-style: groove; margin: 0; } tr, th, td { vertical-align: text-top; padding: .4em; border: .2em black; border-style: groove; margin: auto; word-wrap: break-word; } .p ::after { content: url("http://w3.chabad.org/media/images/1289.jpg") url("http://w3.chabad.org/media/images/1290.jpg") url("http://w3.chabad.org/media/images/1291.jpg") url("http://w3.chabad.org/media/images/1292.jpg") url("http://w3.chabad.org/media/images/1293.jpg"); }

0

body { background: url("https://gracethrufaith.com/assets/uploads/2015/09/wheat.jpg") no-repeat fixed center/cover; } #body { font-family: "Brush Script MT", Cursive; font-size: 1.313em; color: black; outline: .5em silver; outline-style: ridge; padding: 0; border: .2em gold; border-style: groove ridge ridge groove; margin: 5em; width: auto; } nav { padding: 50px 0; min-width: 500px; } nav ul { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%); box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); } nav ul li { display: inline-block; } nav ul li a { padding: 10px; color: #000000; font-size: 18px; font-family: Arial; text-decoration: none; display: block; } h1 { text-shadow: 0 0 .1em black; color: gold; } .inbg { background: url("http://supernovathemes.com/wp-content/themes/supernovathemes/images/bg/b32.png") repeat; padding: .4em; border: .378em silver; border-style: ridge groove groove ridge; }

0

0

I did indeed find a solution just now, what I found out was that I DID in fact align my table(s). Note that I said "tables". I finally saw that my somewhat "silly" error what that I simply made two different tables instead of letting all of my information be under one table. Down below is a picture representation... <table> <tbody> *Then all of my info. in the <tr> tags I can simply copy & paste inside here* </tbody> </table>