Put two tables side by side (on same line)

vmars316 · June 25, 2020

Hello & Thanks ;

See Code below ;

I would like to Put two tables side by side (on same line) .

<!DOCTYPE html>
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<style>

#span01 {
    display: inline-block;
}

#span02 {
    display: inline-block;
}

</style>
</head>
<body contenteditable="true">
  <br>
  <span id="span01">
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
  </span>  <!--  <span id="span01"> ---->
<br>
<br>
<br>
  <span id="span02">
<table  style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
  </span> <!--  <div id="span02">  -->
<br>
<br>
<br>
<br>
<br>

</body></html>

Thanks for your help .

Edited June 25, 2020 by vmars316
typo

dsonesuk · June 25, 2020

My GOD! groundhog day experience. twilight zone theme in background.

vmars316 · June 25, 2020

Hi dsonesuk ;

I think you are referring to this :

http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

But no , that's a different problem .

There I was dealing with my own Fake Tables .

Now I am using real Tables .

vmars316 · June 25, 2020

Sorry , you are correct .

I developed parallel fake tables to get around the no parallel tables linitation . Which woked great .

http://vmars.us/ShowMe/FAKE-TABLES-ContentEditable-COPYABLE.html

I wonder if parallel Tables in a parallel <aside> situation .

Edited June 25, 2020 by vmars316

vmars316 · June 27, 2020

Pls , Let me ask you this

This time using <aside>

How can I get "word-wrap: break-word; " to work for each cell (td) ?

Right now it appears to stretch on into infinity .

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div>
<table  contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
        </aside>

    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div>
<table contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
</body>
</html>

Thanks

Edited June 27, 2020 by vmars316
typo

JMRKER · June 27, 2020

Where is the problem of "stretch on into infinity" occuring?

You only have single #'s within the cells using the <p> tags (which wrap fine without the CSS

overflow-wrap: break-word;

code

What does the desired output look like?

dsonesuk · June 27, 2020

Your code does not validate, so we don't know if its the invalid html causing the problem, or what you think is maybe a problem.

Also let me go through commenting format for you again!

// or /* .... */ GOOD For Javascript,

GOOD For HTML,

/* .... */ GOOD For CSS.

vmars316 · June 29, 2020

Thanks ;

JMRKER : Watch what happens when you hold down the 1 key .

The whole left table stretches way on top of the right table .

Quote

What does the desired output look like?

I want it to each table to stay in place , and wrap each line .

Thanks

Validated :

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
	<!-- https://www.freeformatter.com/html-validator.html  --> 
    <!-- // or  /* GOOD For Javascript */  -->
    <!-- GOOD For HTML -->  
    <!--  /* GOOD For CSS */   --> 
	<style>
	table {
	text-align: left; width: 100%;  background-color: rgb(232, 230 , 228);   border-style: solid;
    border-color: rgb(113, 30 , 19); 
	}
	p { background-color: rgb(246, 244, 242); 
	}
	</style>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div>
<table  contenteditable="true" >
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
        </aside>
		
    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div>
<table contenteditable="true">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
   
</body>
</html>

JMRKER · June 29, 2020

1 hour ago, vmars316 said:

@vmars316 If you mean hold down the key constantly for the whole time, then what you see is exactly what should happen.
If you put only 1 space in that long line, the table will go back to its' normal size. If you want a line of unbroken letters that long
you will need to redesign your table displays.

Something to consider would be to limit the line length input so that input could not extend past the original table size.

Or keep your long lines (if that is truly necessary) but look into the CSS element control of overflow: hidden

Or possibly add a CSS scroll function to your table display.

Personally, I never enter a line of 1's that long unless I have fallen asleep at the keyboard.

vmars316 · June 30, 2020

Thanks ;

JMRKR "What does the desired output look like?"

Here is exactly how I would like it to behave :

<!DOCTYPE html>
<html>
<style>
.Lcol {

}
.Rcol {

}
</style>
<body>
<h4>Editable-Simple-P.html Needs Copy Button + Which Col InputBox</h4>
<p  class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>

<p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 2. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 5. Rcol<hr></p>

<p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>

</body>
</html>

Thanks

dsonesuk · June 30, 2020

You just need for the table

table-layout: fixed

	table {
    table-layout: fixed;
	text-align: left; width: 100%;  background-color: rgb(232, 230 , 228);   border-style: solid;
    border-color: rgb(113, 30 , 19); 
	}

vmars316 · July 1, 2020

Ah...What a relief , Thank You Very Much

JMRKER · July 1, 2020

18 hours ago, vmars316 said:

Ah...What a relief , Thank You Very Much

Doesn't make much sense to me.

If you continue to hold the '1' key down (a long time),
it jumps to a second line and then continues behind the right table display
until it come out on the far right. Then both tables shift to the right.

But if it fulfills your design desires, so be it.

dsonesuk · July 1, 2020

It should remain in the td cell and continue to stack, it should never move to second or change its width of either.

https://www.w3schools.com/code/tryit.asp?filename=GGC6G65OHHIK

vmars316 · July 4, 2020

Yes , and I can select/copy each Table individually .

Thanks

What I don't like is that if I hit enter-key It creates what loos like a whole line .

Is there a way to stop it from creating a whole new colored line ,

it looks like a whole new paragraph (sort of) .

And keep enter-key text in the same line .

I could ignore the enter-key with .js , but then how would I create a new line ?

Type in blanks til I overflow to a new line ?

Thanks

dsonesuk · July 4, 2020

Does not ALL editors do that? Don't press enter unless you want a newline.

JMRKER · July 4, 2020

You can use Shift-Enter to create a 2nd line within the paragraph area.

Makwana Prahlad · July 23, 2020

Hello, @vmars316

Please try this code,To Put two tables side by side (on same line)

<strong>Using display: inline-block; </strong><br>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

<hr>
<strong>Using float: left; </strong><br>
   <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

//Css File

        .floatedTable {
            float:left;
        }
        .inlineTable {
            display: inline-block;
        }

I hope this code will be useful.

Thank you.

dsonesuk · July 23, 2020

DON'T JUST READ THE TITLE, read the comments.

vmars316 · September 10, 2020

On 7/22/2020 at 11:54 PM, Makwana Prahlad said:

Hello, @vmars316

Please try this code,To Put two tables side by side (on same line)


<strong>Using display: inline-block; </strong><br>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

<hr>
<strong>Using float: left; </strong><br>
   <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

//Css File

        .floatedTable {
            float:left;
        }
        .inlineTable {
            display: inline-block;
        }

I hope this code will be useful.

Thank you.

That doesnt work for me :

I havent been back here for a long time . So didnt notice your Post.

I needed two tables side by side by side , such that I could select/copy each table as a column , without effecting the other Tab

I ended up doing this:


<!doctype html>
<html>
<head>
    <title></title>
	<style>
table{ table-layout: fixed;
         background-color: rgb(232, 230 , 228); width: 100%;
         border-style: solid; border-width: 3px; border-color: maroon;
}

.table01 { 	text-align: left; width: 100%; 
}

.table02 {	text-align: left; width: 100%; 
}

td{vertical-align: top; width: 100%; background-color:  
}

p{vertical-align: top;  width: 100%; background-color: rgb(246, 244, 242); 
}
	</style>
</head>
<body>
<h6 style="text-align:center;">Aside-With-2-Tables-table-layout-fixed-Editable.html 
<br>[aside style="float: right; width: 50%; font: 20px Calibri;"] 
</h6>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div>
<table  class="table01" contenteditable="true" >
<tbody>
<tr>
<td ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; " ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; " ><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
        </aside>

    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div>
<table  class="table02" contenteditable="true" >
<tbody>
<tr>
<td style="vertical-align: top; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; " ><p>2</td>
</tr>
<tr>
<td style="vertical-align: top; " ><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
</body>
</html>

Thanks

Put two tables side by side (on same line)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in