+ 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.*
10 Respostas
+ 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
The HTML
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
The CSS
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>
Costuma ter perguntas como essa?
Aprenda de maneira mais eficiente, de graƧa:
