I have been working a lot on 2 columns inside of a table with the foundation framework. I cannot understand why column 2 is going down under column 1, when I resize my window to under 600px? I would like that the columns are staying beside each other, when the window is resized. I have set the column to fill 6 each, so the second column should not jump down?
Does anybody knows how I can solve this? The code is for email newsletter, that is why I am using tables.
I have a JSfiddle with the CSS code aswell: jsfiddle
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 1</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 2</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A big text to test if the text is responsive.
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Above first wrapper class there is a tag.So write style inside tr tag like
As of this writing, there is still use of the nested table layout for most email clients. The answer for this is simple: Not all clients are up to speed, not all computers are up to speed.
Using tables in html emails is the most practiced and best method for overall deployment regardless of your email client. Foundation is nice, yes - but it is not the email industry standard as of yet.
Take a look at this handy tutorial from Mailchimp. I just wanted to clarify that you are not wrong for doing it this way, and you will be better off learning responsive email coding from the aforementioned tutorials first.
All that being said - what you've done in your jsfiddle is actually correct. But if you do NOT want them to collapse, simply remove the #media query strings.
Add "float: left" to the second wrapper of column2
Related
My horizontal rule is mixed up with part of the information on a table
So, my issue is to create two separate tables side by side, instead of one table below the other like usual. I did something that made it work but now my <hr> tag is mixed together with the tables.
<h3>Skills</h3>
<table style="float: left">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
That is the code. Can someone please help me put the horizontal rule below the table? As you can see from my code, the hr tag comes after closing the second table tag but my final output has mixed up the horizontal rule together with the table, instead of below it. What error have I made in my code? Any help would be appreciated, especially from my code. Somebody advise me on what's wrong with my code.
Also, I'm not pretty sure what is the work of the div tag since this was kinda an assignment if anybody can explain to me well, and why I put it in my code, I honestly don't know.
table {
float: left
}
hr {
clear: both
}
<h3>Skills</h3>
<table>
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
Change the styles of the <table>s to be displayed as inline:
<h3>Skills</h3>
<table style="display:inline">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="display: inline">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
JSFiddle.
Just an educated guess at this stage you have two
<table style="float: left"> have you tried
<table style="float: right"> for your second table? instead of left? Hope this helps!!
I've found the solution
I just had to put my two tables inside one main table, the two tables would be table data inside table rows
<h3>Skills</h3>
<table cellspacing="10">
<td>
<table cellspacing="10">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
</td>
<td>
<table cellspacing="10">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
</td>
</table>
I have <table> and I need it to be two-column on small screens. Here is what it looks like on large screen:
(source: firefoxusercontent.com)
And here is what it currently looks like on small screen (I screenshoted whole website, you can see about 1/3 of the page at once).
(source: firefoxusercontent.com)
When on small screen, there's ton of unused space on the right of the table on the top. So I'd like to have the table split into two columns - via CSS if possible.
HTML of the table looks like this:
<div class="pure-u-1 pure-u-md-1-3">
<h1 class="content-subhead">Průměry</h1>
<table class="pure-table">
<tbody>
<tr>
<td>
Čj
</td>
<td>
A
</td>
</tr>
...
<tr>
<td>
SM
</td>
<td>
Z
</td>
</tr>
</tbody>
</table>
</div>
I use purecss. The weird classes of the div mean: Make this table occupy the whole grid row, except when there is big screen (no smartphone), then make this occupy 1/3 of the grid row.
Here is full jsfiddle example.
basic HTML code is like this.
<div class="pure-u-1 pure-u-md-1-3">
<h1 class="content-subhead">Průměry</h1>
<table class="pure-table">
<thead>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Po</td>
</tr>
<tr>
<td>Ut</td>
</tr>
<tr>
<td>St</td>
</tr>
<tr>
<td>Po</td>
</tr>
</tbody>
</table>
</div>
and if you want to add css, then check this link https://www.w3schools.com/css/css_rwd_grid.asp
I figured out the problem.
It is because of the class pure-u-1 because this will be in 100% width when viewing it in mobile screens.
change it to pure-u-2 so that it will split into two parts
I can't add the whole code here, so I'm updating the fiddle .
<div class="pure-u-2 pure-u-md-1-3">
<h1 class="content-subhead">Průměry</h1>
<table class="pure-table">
<tbody>
<tr>
<td>
Čj
</td>
<td>
A
</td>
</tr>
...
<tr>
<td>
SM
</td>
<td>
Z
</td>
</tr>
</tbody>
</table>
</div>
Fiddle link: https://jsfiddle.net/9zy08xen/2/
How to make individual cells in a table a hyperlink in html?
This is how I tried to make it and it did not work:
<table>
<tr>
<td id="Home">Home
</td>
<td id="Locations">Locations
</td>
<td id="Accomodation">Accomodation
</td>
<td id="Transport">Transport
</td>
<td id="Contact">Contact Us
</td>
</tr>
</table>
The problem is not the table, it's that there is no content in the <a> tag, so, there's nowhere to click to trigger the link. Try this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
The reason it didn't work because you didn't write home inside the tag.
To make any text hyperlink, you have to put that text inside the tag.
In your case, you can make hyperlinks easily by putting Home, Location etc inside the the a tag like this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
I think the problem here is that your tags actually does not show anything, so have 0px width tags. you can put test inside the tags, which will work. Example:
Home
I'm trying to set up my website with an image, then under that image there will be two SVG files and two Bootstrap-style grids each containing one table of information. However, Bootstrap seems to be making them orient vertically instead of horizontally. You can see the end result here if you scroll to the bottom. As you'll see, the Population by Gender and Household and Family tables are one after another vertically instead of horizontally, as I want them to be. Please do note before voting to close this for duplicate that there are other problems similar to this one, but I've tried the solutions in them and they didn't work.
I've included code of the relevant portion of the HTML, it's a bit of a mess but as you can see the <div class="col-xl-6"> tags that Bootstrap uses are around the two tables, yet they still show up vertically. How come?
<div class="container-fluid">
<svg>HUGE SVG LINK REMOVED</svg>
<svg>2ND HUGE SVG LINK REMOVED</svg>
<div class="row">
<div class="col-xl-6">
<h3>Population by Gender</h3>
<div>Male: 627 (44.91%, )</div>
<div>Females: 769 (55.09%, )</div>
<br>
<table cellpadding="0">
<tr>
<td align="center">Block Group 970500-1</td>
<td>
<div>Male: 44.91%</div>
<div> Female: 55.09%</div>
</td>
</tr>
<tr>
<td align="center">New York</td>
<td>
<div id="pt" >Male: 48.39%</div>
Female: 51.61%
</td>
</tr>
<tr></tr>
</table>
<p class="small">*Based on 2010 data.</p>
</div>
<div class="col-xl-6">
<a name="HouseholdandFamily"></a>
<h3>Household and Family</h3>
<table class="tbb tbright" cellpadding="20">
<tr bgcolor="#eeeeee">
<td> </td>
<td><b>Block Group 970500-1</b></td>
</tr>
<tr>
<td>Total Households</td>
<td>548</td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Household Size</td>
<td>2.31,</td>
</tr>
<tr>
<td>1 Person Households</td>
<td>185, 33.76%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>2 or More Person Households</td>
<td>363, 66.24%, </td>
</tr>
<tr>
<td>Family Households (Families)</td>
<td>321, 58.58%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Family Size</td>
<td>2.98, </td>
</tr>
<tr>
<td>Married-Couple Family</td>
<td>221, 40.33%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Nonfamily Households</td>
<td>227, 41.42%, </td>
</tr>
</table>
</div>
</div>
You're using <div class="col-xl-6">, that means this div would take 6 columns on extra large displays, but it will take full width on anything smaller.
So, you probably need to use something smaller like this:
<div class="col-md-6"></div>
or
<div class="col-lg-6"></div>
For 'Population by Gender' box: move <table> into <div> element.
For each of div element set class col-xs-6 col-md-6.
Here you can find examples: http://getbootstrap.com/examples/grid/
When I use <table> with <tr> and <td> I always get NxN tables and not what I want.
For example:
<table border = "1">
<tr> <td> Do you love peanuts? This is a very important question. </td> </tr>
<tr> <td> Yes, I do. </td> <td> No, I don't. </td> </tr>
</table>
And yet, it looks like a 2x2 as one there is a blank square created over the page.
An example is here.
How can I make the first row (with the one element) spread the same as the one with two elements. I'm not talking about minimizing number of lines (in the text) or whatever, I mean just stretching it up to there.
You can solve this using the attribute colspan on the td tag:
<table border = "1">
<tr>
<td colspan="2">
Do you love peanuts? This is a very important question.
</td>
</tr>
<tr>
<td>
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
Check this link
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">Do you love peanuts? This is a very important question.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>