Table rows are placed incorrectly - left to right is the correct way

HTML & CSS
1

Hey Guys I cant for the love of life it my tables to work I’m not sure what i’m doing wrong or is it just it wont work I have software i using for my business I had a image on there and it worked fine but now I want it to where my users can click on the Facebook or other services but everything I use the code to place the table it keeps dropping downward

I was using the code as a test `

<table width="838">
<thead>
<tr>
<th>[HEADER]</th>
<th>[HEADER]</th>
<th>[HEADER]</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
<td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
<td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
</tr>
</tbody>
</table>

	`

but the outcome is always the same does anyone have a trick or something I can do to make this work I thought at first it could be because I was missing something but I don’t know what it can be and I also thought it because the box is small so I would open a invoice from a user and its still shows the same it’s like it wont go from right to left at all it just drops down can someone please help me Thanks

1056×816 149 KB

2

Hi,
You must have something else going on that we’re not aware of because the table code you posted does just what it should. It lays out like a normal table.

I’m not exactly sure where this table goes, is it on a website, or is it part of an invoice?

Maybe give us a link to the broken page.

On a side note, it doesn’t really look like tabular data either, if it’s not you should be using CSS for the page layout.

2 Likes
4

As usual for me, I don’t understand the issue.

Tables use rows, you are showing a column. You are saying that left to right is the correct way, which it is, and as Ray.H said, that is how your table code behaves.

You will need to post a link to your site, a CodePen that demonstrates the issue, or a “working page” that we can copy to our computers and see the issue. We can’t troubleshoot an image nor incomplete code.

This “working page” adds dir="rtl" to the <html> element to change the direction of the columns and everything else on the page. Delete dir="rtl" or change "rtl" to "ltr" to arrange the table columns in their normal left to right order.

<!doctype html>
<html lang="en" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/table-rows-are-placed-incorrectly-left-to-right-is-the-correct-way/295462/4
-->
    <style>
table {
    margin:0 auto;
}
    </style>
</head>
<body>

<table width="838">
    <thead>
        <tr>
            <th>[HEADER]col1</th>
            <th>[HEADER]col2</th>
            <th>[HEADER]col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
            <td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
            <td><img src="http://www.liftedfromdarkness.com/wp-content/uploads/2015/08/lifted-fb.png" alt="" width="265" height="120" /></td>
        </tr>
    </tbody>
</table>

</body>
</html>
5

There must be some css which is overriding the default display of the table.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.