I'm quite new in html & css. Anyway, I have a page to design and particularly a table where I have different information in each cell. So I need to put information in each corner and in the center.
I found a solution, but i'm not fully happy with as i can't reduce the size of the cell.
Here is my html :
<td>
<div class ="upperleft"> x </div>
<div class = "upperRight"> x </div>
<div class = "center"> x </div>
<div class ="bottomleft"> x </div>
<div class = "bottomRight"> x </div>
</td>
and in my css I use float left or rigth for the bottom or upper DIV.
Have you got any other solution for such situation?
To make my comment an answer:
<td>
<table>
<tr>
<td>top-left</td>
<td>bottom-left</td>
</tr>
<tr>
<td rowspan="2">center</td>
</td>
<tr>
<td>top-right</td>
<td>bottom-right</td>
</tr>
</table>
</td>
Related
On the left, I have buttons and the rest of the screen is a table, and I need a vertical line to act as a separator between the two but without any use of CSS/styles/classes.
Here is the base code:
<section align="left">
<div id="buttons">
<button type="button">Fire</button>
<br>
<button type="button">Water</button>
</div>
</section>
<!-- NEED A VERTICAL LINE HERE -->
<section align="center">
<table id="pokemons">
<tr>
<td>
<h5>Charizard</h5>
</td>
<td>
<h5>Blastoise</h5>
</td>
</tr>
<br>
<tr>
<td>
<h5>Pikachu</h5>
</td>
<td>
<h5>Squirttle</h5>
</td>
</tr>
</table>
</section>
I currently have this (for some reason in online editors the table isn't aligned to the middle, but on my local code it's fine):
I need this:
If you want to avoid using CSS, then your page will look atrocious.
There is not really a way to do that. I would make an <hr> tag and use transform: rotate(90); in your CSS.
I'm sorry but you will have to use CSS. No way around it, unless you use CSS or JavaScript.
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
Have a look at this fiddle Here for the CSS and HTML view.
The code is:
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
Dashboard
Logout
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
The div with id header-bar must contain all of the elements drawn in this segment, but I cannot understand why, this segment refuses to behave. I am new to design, using more of graphical tools like Dreamweaver with code and design views to make these things, even there the content gets placed all wrong.
And in the browser, the div with id header-bar does not show any text at all. The div with id header-bar reports a height of 0px in Chrome's Inspect Element.
Add overflow:auto to your header-bar div. When the child elements of any element are floated, they're removed from the normal flow of the document which is why your header-bar div reports a height of zero. Adding overflow:auto to the parent div (header-bar) restores the expected behavior.
jsFiddle example
I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag
I am a bit of a noob with HTML and CSS. I am wondering what is the best way to:
1) Arrange 4 tables on a page in a square formation -- ie, each table is a quadrant, or
2) Put 4 tables within another table.
Any advice is appreciated.
Regards.
If you're want to split the page to a 2X2 table best way is to use Divs (also easier to apply css on divs)
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-1
</div>
<div style="float:left; width:50%">
x-2,y-1
</div>
<div style="clear:both"></div>
</div>
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-2
</div>
<div style="float:left; width:50%">
x-2,y-2
</div>
<div style="clear:both"></div>
</div>
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables
To answer the "Put 4 tables within another table." part of your question: as Jonthan Sampson said in his comment to your quesiton: create one table with two rows and two cells per row. In each of these cells, put one table within the td tags:
<table>
<tr>
<td>
<table>
<tr>
<td>
Table 1/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 2/4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Table 3/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 4/4
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td> Top left Information Here </td>
<td> Top right Information here </td>
</tr>
<tr>
<td> Bottom left Information Here </td>
<td> Bottom right Information here </td>
</tr>
</table>
JSFiddle
http://jsfiddle.net/DNYwc/
This seems to be reducible to the question “to display four elements in a two by two formation, should I use a table or some other method?” Whether the elements are tables or something else seems to be irrelevant to the basic question.
If the four elements logically constitute a 2 × 2 table, make it such a table in markup. If the two by two formation is just the preferred rendering in some situations, then you could some other approach, such as floats, something like
<div style="float: left">A</div>
<div>B</div>
<br clear=all>
<div style="float: left">C</div>
<div>D</div>
<br clear=all>
This would result in a 2 by 2 rendering if there is enough width, but in a narrow window, A, B, C, D would appear in a 4 by 1 formation. If you use a table, then a narrow window would force horizontal scrolling. The choice really depends on which alternative is better for the content and structure.
Honestly, it sounds like you want 1 table, 2 rows, 2 cells per row.
<table>
<tbody>
<tr>
<td>Top Left</td><td>Top Right</td>
</tr>
<tr>
<td>Bot Left</td><td>Bot Right</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/
If it's layout you're after, there's a better way...
Please note that although this may give you the layout structure you're desiring, using tables for non-tabular data (think of a spreadsheet) is an illegal use of the element.
If you're attempting to layout a page, there are far better options available to you. You could use four div elements, positioned in a fixed fashion to the viewport:
<div class="panels">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/2/