Imagine that I have <table>, then I want to change the position of the image and the text in the child "nth-child" of the table. Is it possible to do that? Please help me out of this problem thanks.
here's the code of the table
<table id="tbl-inquiry">
<tr>
<td><img class="table-img"src="images/2.jpg"></td>
<td><h5 class="table-title">sample</h5>
<p class="table-description">sample text.</p></td>
</tr>
<tr>
<td><img class="table-img"src="images/2.jpg"></td>
<td><h5 class="table-title">sample</h5>
<p class="table-description">sample text.</p></td>
</tr>
</table>
sample output
It's not possible with a table, however it's super easy if you use CSS Grid instead.
Here is a super solid resource: https://css-tricks.com/snippets/css/complete-guide-grid/
Related
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
I have the following HTML table set up which yields the result in the screenshot.
Code:
<table>
<tr>
<td align="center" colspan="4">
<img src="website_title_banner.png" style='width:100%;' alt="nul"/>
</td>
</tr>
<tr style="width:100%;">
<td>
<img src="About sign.fw.png" style='width:100%;'/>
</td>
<td>
<img src="gallery sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Products sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Contacts sign.fw.png" style='width:100%'/>
</td>
</tr>
</table>
Scrrenshot
I'd like to have it so the signs are 'nailed' to the striped banner. Given that the signs are all placed in their own table cell in the row, is it possible to make the 2nd row overlap with the first row by a specified pixel distance?
I'm reasonably proficient with HTML (but it has been a long time) but I am unfamiliar with CSS - so if the solution is to use CSS, a step by step implementation would be greatly appreciated (using Dreamweaver).
Thanks in advance!
Try styling your second row with a negative margin-top. This should make the .png's overlap the row above them. Here's an example based off of your code - http://jsfiddle.net/NinoLopezWeb/myv37cb0/1/
This is not the best way to do it, but if you really want to you can use a negative value in
margin-top, for example margin-top: 10px;
Not the cleanest way but it works.
quickest way to do this is have a negative margin. You can also make the stripes as the background of the menu.
I have a table formatted as:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
How can I get them to both display from the top of 'tr'? I assume there's a way to stop automatic vertical alignment with CSS?
To clarify for future viewers, I got it working using:
CSS:
td {
vertical-align: top;
}
HTML:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
(Here's the fiddle)
Hey if you have some questions how to use tables pls look some examples here
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_table.asp
If you prefer to avoid CSS you can do the same thing inline with the depreciated valign tag. Valign is not supported in HTML5 but is the recommended method if you are working within the context of an HTML email.
<table border="1">
<tr>
<td width="110">
Long list of info Line two
</td>
<td valign="top">
Shorter list of info
</td>
</tr>
</table>
Or you could always use two rows if you can predict and control where your breaks are going to be and want to simplify the markup further.
I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>
I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/