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.
Related
This has been resolved. I found this, and it works great for what I was trying to do.
Please forgive me, as I know this is a redundant question. However, I have tried several examples and tutorials, and can't get what I want.
I have a table, which is basically the following but repeating for a few thousand lines. I need to convert it to divs. The cells are not expanding to the parent, and when they have text, they all are different widths.
Example of how it needs to be (this is a classic table):
and here is what I have so far...
Here's a few lines of code because codepen isn't enough...
<html>
<head>
</head>
</html>
I am not good at all with tables. I am trying to make it mobile-friendly, which is why the cells are inline-block.
Any advice would be appreciated.
Try use bootstrap,u can search the tutorial at their site.
You should be using a standard HTML <table> not faking functionality using <div> tags. I understand that you want to make this mobile friendly, but this isn't the best way to do it.
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
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/
From your experience, what would be the most suitable CSS solution for replacing the old unfashionable tables, with divs and styles? i am especially interested if there is a solution for replacing the table's tags. (headers of the tables)
thank you!
If you have tabular data, then you should always use a table. There is no reason to replace it with a floating box layout.
Don't use tables for layouting your whole page.
Generally, you'll need to replace each cell() with a div.
I would then google for examples of CSS column layouts to find out which behaviour suits you best. You can place divs in exact positions or make them relative. Either way, if you don't know CSS you're going to have to learn it and play with it to get an idea how
Want some handy guidelines prior starting the HTML Prototype of this application. Please find below the mockup screen.
Mockup screen
I need to make this structurewith liquid layout so that it will adjust as per the resolution.
Please do suggest me should i go with DIV with floating left or can i use tables to achieve this structure?
Thanks
Lokesh Yadav
Seems like a good div approach to me. Floats seem to be the typical way to achieve this, but I've personally always found display: inline-block as an extremely helpful tool to implement these sorts of layouts.
Using table would be much easier. Forms are naturally tabular. Never seen a form that is non-tabular.
the whole table vs div is totally overblown. I do agree that it's not a good idea to use tables for designing layouts but it's what it was back in the old days where CSS support was limited.
however for those to go far to declare forms to be table-less is going too far. All forms are naturally tabular and by doing it in table, you actually reinforce its tabular structure.
We can argue that we should not use tables for calendar since technically, a calendar is tabular for OUR convenience, not because the dates themselves are tabular!
Personally, I'd build that in divs. I'd have a formrow div, then contain each of the columns in left floated divs with a specified width.
I think:
the optimal way is to use a
DIV with floating but its harder to
code because you want a table-style
and you must calc the exact width of
any div (in pixel or percent).
the easyer way is to use TABLES with
colspan.