Menu
Community /Pin to ProfileBookmark
to answer your question.. Id say its a mix of html with some css styles added....
Take a look at these demo's for an idea of how it was done..
www.w3schools.com-tables
Luck
You also have elements that "span" multiple TR -- there's an attribute for TH and TD called "ROWSPAN" to say that it spans multiple rows; just as you'd use COLSPAN when spanning multiple columns.
You should probably also beware of the CAPTION tag which is used to describe the contents of the table -- which should be used instead of a numbered heading or any other goofy way of adding a description to it, and the SCOPE attribute that creates the semantic relationship between your TH and the data they apply to.
So the "proper" markup given your image would go something like this:
Everything else being done for 'style' belonging in your stylesheet, which to match that picture would go something like this:
I put a live copy here:
http://www.cutcodedown.com/for_others/reckimo/template.html
So you can see it in action, and as with all my examples the directory:
http://www.cutcodedown.com/for_others/reckimo/
is unlocked for easy access to the gooey bits and pieces.
I highly suggest that if you're going to be building HTML, you take the time to read a decent reference on the subject beginning to end -- and no, the steaming pile of buggy broken bull known as W3Schools isn't it. The one I recommend is:
http://htmlhelp.com/reference/html40/
It's an older reference, but with HTML 5 simply being a superset of 4, and 4 not having seen significant changes since 1998, it's just as relevant today as it was back when said site was the one Netscape recommended. IMHO it remains one of the best efforts at turning the near gibberish legalese of the "specifications" into something digestible by normal people.
Go to that reference, read it beginning to end on EVERY tag, and you'll learn far more than any tutorial or other reference would provide you. You don't have to memorize it, just remember enough to go "hey, isn't there a tag or attribute for this?" and then go back to the reference when you need it.
In any case, hope this helps.basic xhtml table
Much less you don't even provide the ROWSPAN that are likely what was really confusing the OP...
Though very much what I expect when I see people using the XML Prolog; which is to say what I expect when I see a tranny or 5 doctype... and no, that's not a good thing.<table border="1">
<tbody>
<tr>
<th>Range </th>
<th> Height Adjustment lever</th>
<th> Head height</th>
</tr>
<tr>
<td rowspan="2" > large</td>
<td>thin</td>
<td>2mm</td>
</tr>
<tr>
<td>thick</td>
<td>3mm</td>
</tr>
<tr>
<td rowspan="2"> H range<td>
<td>thin<td>
<td>3mm<td>
</tr>
<tr>
<td>thick<td>
<td>4mm<td>
</tr>
</tbody>
</table>
help with HTML Table
Hallo,
i have to make a table in html, but i can’t figure out how to do it like it as the picture, it’s for my websites. I visited several websites but i can’t find the solution.
[IMG]
It has to be this.
<table”>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
How can i do this without creating new lines outside the tr?
You guys would really help me with this problem
Thanks
Sign in
to post a comment5 Comments(s) ↴
0
@Code-tardSep 01.2014 — #Dude really bad form to lead out a thread with "help".... would it have been so hard to say "Basic tables problem"?...to answer your question.. Id say its a mix of html with some css styles added....
Take a look at these demo's for an idea of how it was done..
Luck
reply?
0
@deathshadowSep 01.2014 — #Well, from what you posted for code the first thing I've noticed is you haven't learned that "there's more that goes in a table than TR and TD" -- a common failing. You've got headings in the picture, there are TAGS for headings like TH... you've got a set of column headings who's TR should go into a THEAD, and data headings and data fields which would be the TBODY.You also have elements that "span" multiple TR -- there's an attribute for TH and TD called "ROWSPAN" to say that it spans multiple rows; just as you'd use COLSPAN when spanning multiple columns.
You should probably also beware of the CAPTION tag which is used to describe the contents of the table -- which should be used instead of a numbered heading or any other goofy way of adding a description to it, and the SCOPE attribute that creates the semantic relationship between your TH and the data they apply to.
So the "proper" markup given your image would go something like this:
<table class="measurements">
<caption>Describe this data here</caption>
<thead>
<tr>
<th scope="col">Range</th>
<th scope="col">Height Adjustment Lever</th>
<th scope="col">Head Height</th>
</tr>
</thead><tbody>
<tr>
<th scope="row" rowspan="2">L Range</th>
<td>Thin</td>
<td>2mm (factory default value)</td>
</tr><tr>
<td>Thick</td>
<td>3mm</td>
</tr><tr>
<th scope="row" rowspan="2">H Range</th>
<td>Thin</td>
<td>3mm</td>
</tr><tr>
<td>Thick</td>
<td>4mm</td>
</tr>
</tbody>
</table>Everything else being done for 'style' belonging in your stylesheet, which to match that picture would go something like this:
.measurements {
border-collapse:collapse;
background:#F0F8FF;
}
.measurements td,
.measurements th {
padding:0.2em 0.5em;
text-align:center;
font-weight:normal;
border:1px solid #000;
}
.measurements tbody th {
text-align:left;
vertical-align:top;
}I put a live copy here:
So you can see it in action, and as with all my examples the directory:
is unlocked for easy access to the gooey bits and pieces.
I highly suggest that if you're going to be building HTML, you take the time to read a decent reference on the subject beginning to end -- and no, the steaming pile of buggy broken bull known as W3Schools isn't it. The one I recommend is:
It's an older reference, but with HTML 5 simply being a superset of 4, and 4 not having seen significant changes since 1998, it's just as relevant today as it was back when said site was the one Netscape recommended. IMHO it remains one of the best efforts at turning the near gibberish legalese of the "specifications" into something digestible by normal people.
Go to that reference, read it beginning to end on EVERY tag, and you'll learn far more than any tutorial or other reference would provide you. You don't have to memorize it, just remember enough to go "hey, isn't there a tag or attribute for this?" and then go back to the reference when you need it.
In any case, hope this helps.
reply?
0
@happycodingsSep 02.2014 — #[CODE]Basic XHTML table
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A simple XHTML table</title>
</head>
<body>
<table border = "1" width = "50%" summary = "summary">
<caption><strong>Price of Phones</strong></caption>
<thead>
<tr>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nokia</td>
<td>$120</td>
</tr>
<tr>
<td>Apple</td>
<td>$160</td>
</tr>
<tr>
<td>Lg</td>
<td>$80</td>
</tr>
<tr>
<td>Sony Ericsson</td>
<td>$140</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Asus</th>
<th>$200</th>
</tr>
</tfoot>
</table>
</body>
</html>
[/CODE]reply?
0
@deathshadowSep 02.2014 — #Excepting of course that in XHTML 1.0 STRICT there is no such thing as a BORDER attribute, it's bad form to declare WIDTH in the markup, there is no legitimate reason when you have a perfectly good CAPTION to make the test inside it strong, despite contradictory claims in the WCAG you're best off including SCOPE on those TH... TFOOT actually belongs [b]BEFORE[/b] TBODY otherwise how can it be appended on page-splits...Much less you don't even provide the ROWSPAN that are likely what was really confusing the OP...
Though very much what I expect when I see people using the XML Prolog; which is to say what I expect when I see a tranny or 5 doctype... and no, that's not a good thing.
reply?
0
@VeeramanikandanSep 18.2014 — #<tbody>
<tr>
<th>Range </th>
<th> Height Adjustment lever</th>
<th> Head height</th>
</tr>
<tr>
<td rowspan="2" > large</td>
<td>thin</td>
<td>2mm</td>
</tr>
<tr>
<td>thick</td>
<td>3mm</td>
</tr>
<tr>
<td rowspan="2"> H range<td>
<td>thin<td>
<td>3mm<td>
</tr>
<tr>
<td>thick<td>
<td>4mm<td>
</tr>
</tbody>
</table>
reply?