 HTML Table, Trying to Align rows and columns in HTML table |
  |
| Blondie_33 |
 Feb 24 2023, 03:58 AM
Post
#1
|
|
Group: Members Posts: 3 Joined: 24-February 23 Member No.: 28,819  |
Hello there,
as I'm a HTML noob, I'm in need of help. I'm writing a table HTML but having some basic knowledge lack, as seen, I cannot seem to align the third image with left two. It just keeps getting pushed below. Picture attached below. Thank you! <tr> <td style="width:100%;"> <table width="100%" style="border-spacing:0" rowspan="1" align="left" > <tr> <a href="NONE" alt="" target="_blank" /> <img src="http://www.club.com/test/images/1.jpg" width="300" alt="" style="border-width:0;width:100%;max-width:300px;height:auto;" /> </a> </td> <tr> <td style="width:100%" align="left" rowspan="1"> <a href="NONE" alt="" target="_blank" /> <img src="http://www.club.com/test/images/2.jpg" width="300" alt="" style="border-width:0;width:100%;max-width:300px;height:auto;" /> </a> </td> </tr> <tr> <td style="width:50%" align="right" rowspan="2"> <a href="NONE" alt="" target="_blank" /> <img src="http://www.club.com/test/images/3.jpg" width="300" alt="" style="border-width:0;width:100%;max-width:300px;height:auto;" /> </a> </td> </tr> This post has been edited by Blondie_33: Feb 24 2023, 03:59 AM Attached thumbnail(s) 
|
  |
 
|
| Christian J |
Feb 24 2023, 08:30 AM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Hello!
QUOTE(Blondie_33 @ Feb 24 2023, 09:58 AM)  I cannot seem to align the third image with left two. It just keeps getting pushed below. Do you want the images in a single row? Then you should only use one table row (TR element) containing three cells (TD elements): CODE <table> <tr> <td><img ...></td> <td><img ...></td> <td><img ...></td> </tr> </table> Basically HTML tables require this general structure: a TABLE element containing one or more rows (TR elements), and each row containing one or more cells (TH or TD elements). You can't put cells outside rows, or rows outside the table. Also, HTML tables are not really meant for page layout; you should use CSS for layout, but that comes later...  |
|
|
|
| pandy |
Feb 24 2023, 09:30 AM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
What Christian said.
Tables can feel a little complicated when you are new. I suggest you create a few tables just for practice. Like a table with a single cell, a table with one row with 4 cells, a table with 3 rows with 4 cells each and so on to get the hang of it. You need to fill the cells with something or they'll collapse, but just a few words will do. When you move on to your real table, create the table structure first so you get an overview and put the content in last. Typing the markup with indents makes it easier to see what's what. Like a 4 x 4 table can be written like so. CODE <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> See? Makes it easier to see that everything adds up and where to put your content - in the TDs.  |
|
|
|
| coothead |
Feb 24 2023, 10:24 AM
Post
#4
|
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Blondie_33,
here is an example that uses the MDN - CSS float property HTML CODE <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>Page description</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <h1>Page description</h1> <div id="links"> <div> <a href="#"> <img src="https://via.placeholder.com/300x300/9c0618/fff" alt="image 1"> </a> <a href="#"> <img src="https://via.placeholder.com/300x300/9c0618/fff" alt="image 2"> </a> </div> <a href="#"> <img src="https://via.placeholder.com/300x609/9c0618/fff" alt="image 3"> </a> <!-- #links --></div> </body> </html> screen.css CODE body { background-color: #f9f9f9; font: normal 1em / 1.5 sans-serif; text-align: center; } h1 { font-size: 1.25em; font-weight: normal; color: #444; } #links{ display: inline-block; border: 1px solid #000; overflow: hidden; background-color: #fff; } #links div, #links > a { float: left; } #links a { display: block; width: 8.75em; margin: 0.25em; } #links > a { margin-left: 0; } #links img { display: block; width: 100%; height: auto; } @media (max-width: 19.5em) { #links div, #links > a { float: none; } #links > a { margin-top: 0; margin-left: 0.25em; } } You may view a working example here... Full Page View https://codepen.io/coothead/full/GRXjoRg Editor View https://codepen.io/coothead/pen/GRXjoRg coothead |
|
|
|
| coothead |
Feb 25 2023, 11:28 AM
Post
#5
|
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE Hello there, . I'm writing a table HTML but having some basic knowledge lack. . I cannot seem to align the third image with left two. . It just keeps getting pushed below. This table example might possibly address any lack of knowledge. HTML CODE <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>page description</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <h1>Page description</h1> <table> <caption>rowspan example</caption> <thead> <tr> <th scope="col">header 1</th> <th scope="col">header 2</th> </tr> </thead> <tbody> <tr> <td>data 1</td> <td rowspan="2">data 3</td> </tr><tr> <td>data 2</td> </tr> </tbody> <tfoot> </tr><tr> <td colspan="2">© Blondie 2023</td> </tr> </tfoot> </table> </body> </html> screen.css CODE body { background-color: #f9f9f9; font: normal 1em / 1.5em sans-serif; } h1 { font-size: 1.5em; font-weight: normal; color: #444; text-align: center; } table{ margin: auto; border: 1px solid #000; background-color: #fff; border-spacing: 0.25em; box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4); } caption{ padding: 0.5em 0; } th, tfoot td { padding: 0.5em; background-color: #333; color: #fff; text-align: center; } tbody td { padding: 2em; background-color: #9c0618; color: #fff; } The example is viewable here... Full Page View https://codepen.io/coothead/full/vYzXVae Editor View https://codepen.io/coothead/pen/vYzXVae coothead |
|
|
|
| pandy |
Feb 25 2023, 12:11 PM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Didn't you read that the OP declared noob status? How much of the CSS example do you think he understands? My guess is zilch. And how does a layout table benefit from TBODY, scope and so on?
Everyone must start somewhere and learn at their own pace, step by step. Perfection can't be expected. I'd say it's next to impossible to take it all in at once. It was for me and I'd say that goes for most people. We don't expect a person to drive through roundabouts and on the highway and handle parallel parking on their first driving lesson, do we? |
|
|
|
| coothead |
Feb 25 2023, 01:14 PM
Post
#7
|
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE(pandy @ Feb 25 2023, 05:11 PM) . Didn't you read that the OP declared noob status? Yes, I did read that. QUOTE . How much of the CSS example do you think he understands? I cannot say. QUOTE . how does a layout table benefit from TBODY, scope and so on? It benefits the visually impaired by improving the accessibility of tables. QUOTE . Everyone must start somewhere and learn at their own pace, step by step. . Perfection can't be expected. . I'd say it's next to impossible to take it all in at once. . It was for me and I'd say that goes for most people. I noticed that you had presented the O.P. with a basic table layout and assumed that it would not require a Quantum Leap to take on board the important improvements that can be made. QUOTE . We don't expect a person to drive through roundabouts . and on the highway and handle parallel parking on . their first lesson, do we? As a lifelong pedestrian, I am afraid that I can not answer that.  I can point out though, that both you and your fellow moderator "Christian J" have each given the O.P. lessons on the subject, so mine should really be considered the third rather than the first.  Luckily for us all, the O.P. is totally free take on board all or none of the information that has been presented to them for their consideration.  coohead |
|
|
|
| pandy |
Feb 25 2023, 01:30 PM
Post
#8
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
He could also be scared off from learning more if given too much to chew.
|
|
|
|
| coothead |
Feb 25 2023, 02:02 PM
Post
#9
|
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE(pandy @ Feb 25 2023, 06:30 PM) . He could also be scared off from learning more if given too much to chew. Putting aside that the O.P.'s gender has not actually been stated, I personally have not had any such negative thoughts whilst posting on various coding forums over the past twenty years.  That, of course, does not mean that my attitude is correct, as my mother pointed out to me that I came out her womb contrary.  coothead This post has been edited by coothead: Feb 25 2023, 02:04 PM |
|
|
|
| Blondie_33 |
Feb 27 2023, 01:24 AM
Post
#10
|
|
Group: Members Posts: 3 Joined: 24-February 23 Member No.: 28,819 |
Thank you very very much!
It saved my situation entirely, I appreciate your time and help!!! It made me jump into learning and clarifying more, I had a nice coding learning weekend. As for the discussion above, I personally like to see the entire picture l have to learn, it couldn't scare me off, why going to eat if not hungry? But I do understand all the possible angles... However, I thank you all once again, you have been most helpful and I appreciate it! This post has been edited by Blondie_33: Feb 27 2023, 01:42 AM |
|
|
|
| coothead |
Feb 27 2023, 04:28 AM
Post
#11
|
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE(Blondie_33 @ Feb 27 2023, 06:24 AM) ... I personally like to see the entire picture l have to learn, I believe that the technical term for this process is "Reverse Engineering" Note It does not seem to require eyes in the back of your head either. coothead |
|
|
|
| Jason Knight |
Mar 1 2023, 10:30 PM
Post
#12
|
|
Advanced Member Group: Members Posts: 103 Joined: 25-December 22 Member No.: 28,719 |
I see a lot of talk, but not a lot of addressing what really went wrong for you. The big issues are twofold.
1) If using tables for layout like this, you're trying to nest tables for something that should be one table thanks to something called "rowspan". The one you want next to the other two should be inside the first TR next to the first TD, set to rowspan="2" making it go into the row below it. You even goofed and put rowspan on TABLE when it belongs on either TD or TH... and anchors do not have ALT attributes... and you don't self-close anchors. The /> closure is only for specific tags like img or input which cannot wrap content. And honestly this is 2023, the W3C now recommends that you stop using the /> structure altogether. 2) This is not tabular data, so you really have no business using tables to format it. Tables for layout is an archaic technique that really has no business being used any time after 1997 unless you are making an HTML e-mail. And honestly HTML e-mails being a spam flag is why you shouldn't use HTML e-mails no matter how many know-nothing marketing {expletive omitted} {arousal innuendo omitted} over the idea. Minor nitpick, don't flip the bird at accessibility by shoving new windows down the user's gullet. target="_blank" is an accessibility violation for a reason. People want a new tab/window they can ctrl-click or middle-click. Do not take that choice away from users! Also do not slop style="" into the markup. You accidentally end up sending screen information to all user-agents. Ok, if this is for an HTML e-mail -- the ONLY place using tables for images this way is valid/proper -- we need to dial practices back to 1997 for best compatibility. Thus no XML /> closing, no CSS, genuine 100% old-school. CODE <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <a href="#"> <img src="http://www.club.com/test/images/1.jpg" width="300" alt="Describe This image, ALT is NOT optional" border="0" > </a> </td> <td rowspan="2"> <a href="#" > <img src="http://www.club.com/test/images/3.jpg" width="300" alt="Describe This image, ALT is NOT optional" border="0" > </a> </td> </tr><tr> <td> <a href="#"> <img src="http://www.club.com/test/images/2.jpg" width="300" alt="Describe This image, ALT is NOT optional" border="0" > </a> </td> </tr> </table> See how the third image, the one you want to the right of the other two, is actually in the FIRST TR? That's what rowspan does. In order for it to span the rows it has to be in the first TR, not a separate TR after the others. Now if this is NOT for one of those garbage "instant spam" HTML e-mails, well... this is not tabular data. TAbles for layout was a sloppy sleazy hack that no website would/should be using any time the past 25 years. If this is not for an e-mail, whatever source you were learning from? Faggetabaddit! CODE <section class="imageAnchors"> <a href="#"> <img src="http://www.club.com/test/images/1.jpg" alt="Describe This image, ALT is NOT optional" > </a> <a href="#" > <img src="http://www.club.com/test/images/3.jpg" alt="Describe This image, ALT is NOT optional" > </a> <a href="#"> <img src="http://www.club.com/test/images/2.jpg" alt="Describe This image, ALT is NOT optional" > </a> <!-- .imageAnchors --></section> Is what modern HTML would look like. These are just anchors and images, so I'm not even sure this qualifies as a list of choices. I'd have to see the actual images to weigh in further as even this might not be the correct HTML. Which done properly would rely on style in an external .css file looking something like: CODE .imageAnchors { display:grid; grid-template-areas: "a c" "b c"; grid-template-columns:50% 50%; width:100%; max-width:600px; } .imageAnchors a { text-decoration:none; } .imageAnchors a:nth-child(1) { grid-area:"a"; } .imageAnchors a:nth-child(1) { grid-area:"b"; } .imageAnchors a:nth-child(1) { grid-area:"c"; } .imageAnchors img { display:block; width:100%; height:auto; border:0; } sent using <link media="screen"> so that you're not sending style that only makes sense for screens to print, aural, braille, search, or any other possible target HTML exists to serve information to. |
|
|
|
| Blondie_33 |
Mar 2 2023, 07:14 AM
Post
#13
|
|
Group: Members Posts: 3 Joined: 24-February 23 Member No.: 28,819 |
Thanks @coothead,
I believe it is, yes, I swear by it and it brought me satisfying results so far. @Jason Knight Wow... Yes, it is for an HTML mail, BUT NOT a spam one! And man it sent shivers down my spine, how you beautifully cleaned that code up... Old school indeed, but we need to cover all of the mail providers, and spam can be avoided by adding some Arial in, no? However, our company has been doing these mails the old way since... Forever, basically a lot of marketing companies still use them. They as live as me today, seeing your code... Back to being more professional and serious... I thank you for your effort, it means a lot to me to be able to learn this and understand it. I now get where I went wrong with the rowspan, it just didn't click it for me before... However, I managed to put the mail together without it too and it surprisingly held it's form, but for someone who loves being efficient, coding by the rules it is... Thank you once again This post has been edited by Blondie_33: Mar 2 2023, 07:15 AM |
|
|
|
| pandy |
Mar 2 2023, 02:32 PM
Post
#14
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
And here I thought the main problem was a totally broken table.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 03:42 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC