I am trying to make a 1x2 table and include a picture into one cell and some text into the other. I am not sure if I am doing this correctly or am missing something. But the image appears but the text doesn't...
HTML Code:
<div id="PurpleBacking">
<table>
<tr>
<th><img src="MoneyIcon.png"> </th>
<th> This is a test</th>
</tr>
</table>
</div>
Thanks
I would recommend using <td> instead of<th> in case you want a paragraph or more since <th> is for a header in the table.
So it should be like this:
<div id="PurpleBacking">
<table>
<tr>
<td><img src="MoneyIcon.png"> </td>
<td> This is a test</td>
</tr>
</table>
</div>
Related
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/
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
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/
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
i was trying to put table inside a table like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</tr>
</table>
the reason i want to do this is to set the second table a height
and than overflow:auto so the second table have a scroll bar to scroll down
is that possible , and it it does , how?
You still need a <td>/<th> within a <tr> tag, so add either of those between your <tr> & nested <table> (and probably apply colspan="2")
Also, off the top of my head I'm not sure if the <td>/<th> supports an overflow with scrolling, but if not you can always wrap the nested <table> in a <div> and style it.
<table> isn't valid inside <tr>. Put it inside a <td> inside a <tr> instead.
Like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<td> <!-- ** add this ** -->
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</td> <!-- ** add this ** -->
</tr>
</table>