I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
Related
Task:-
don't wanna use fix width property in whole program.
contents can be arranged as per the addition of the extra contents.
we can use table rows and columns.
nth-child property must be used.
i have used input type buttons so that must be look interactive in layout.
Thanks a lot guys in advance i need this as soon as possible.
My Code and Image layout is in comment box please refer.
Here is your update Code with fiddle
Just add colspan="4" to your td containing output textbox.
I'm a newb to CSS. I have a page that where an html table is generated at runtime by a bunch of tags. However,data is generated only in one of those cells and the adjacent cells end up being empty.
<tr>
<td> Really long data that is forced to wrap around.</td>
<td> empty cell</td>
<td empty cell </td>
</tr>
Is there a clean(cross browser compatible) way to get the first cell to span multiple columns via CSS without force a wrap around. Ideally, one would set the colspan on the first cell to get it to stretch multiple cells but since the html is generated on the server, this isnt much of an option.
This is the closest set of solution Ive found to my question and it doesnt seem to solve the problem.
Looks like you are trying to use tables for presentation, rather than tabular content. You should give a look into display: flexbox which may help you achieve the effect you want.
Here is a great tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm very new at HTML table features, but i understand HTML.
I have to create a table exactly like the image, but I already have lost a good time trying to do it.
I think the best way to do it is work with 'rowspan',
but I don't know how exactly.
Could someone give me a little help, please?
Thanks!
Use it as an attribute.
This example is for the first row (next to 110)
<td colspan="6"></td>
I'm not entirely sure what you're having difficulty with, but if you're struggling with table-cell styling, you can either utilize CSS' nth-child() selector or use classes to pinpoint specific cells for styling application.
I've recreated your table in this jsfiddle.
I've been using bootstrap for a while now but I can't do this thing (I don't even know how to do it without Bootstrap).
What I want to is is indent either a table or divs. I've seen something like this done in Bootstrap with <li> but nothing with tables. Basically I want a table with the <th> which is the title and below the names of the projects. The reason I need to indent is because the projects depend on other projects; so the project below anoher project has to be possitioned slightly to the right of its parent (which is basically indenting, right?)
Here are a couple options if what you need is a small indentation to suggest a hierarchy. They're not specific to Bootstrap tables.
The first is to add a couple nonbreaking spaces per level of indent that you want. This has the advantage that the spaces can be added by whatever code is producing the table content without disturbing the html of the table. It has the disadvantage that if the text wraps within the cell the wrapped lines will not be indented. Also, all those invisible nonbreaking spaces can lead to copy/paste surprises.
<td> Indented Text</td>
<td> Indented More</td>
If your code is emitting the html of the table, a better solution is to change the padding of the table cell by increasing amounts. It has the advantage of finer control than increments of nonbreaking space, and wrapped text is also indented. The disadvantage here is you're emitting html from code and that may make it more difficult to adjust the layout.
<td style="padding-left:20px">Indented Text</td>
<td style="padding-left:40px">Indented More</td>
Could this be solved using offsets? It's somewhat difficult to help when we dont know the situation or how the markup is looking.
The offset* class will add a margin-left to your element. Maybe that will help you?
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
How do i replicate this kind of a structure using <div> or <span>'ed CSS
Depends on what you're trying to replicate.
With the simple example you've given, it's not easy to tell exactly what you're trying to achieve, but if what you're tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.
One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.
If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.
Finally, if the contents of the <table> is actually a table of data, don't be afraid of keeping it in a table - the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.
If you mean that you want to display two DIVs next to eachother, try using the css styles float:left or float:right. use another div with clear:left, clear:right or clear:both to reset following divs to normal behavior.
Here is a link explaining more about that:
http://www.w3schools.com/css/css_float.asp
(click the 'try it' links for very good examples)
I don't know if that's what you're looking for... but I hope so!