I have just begun learning elementary 'coding' (HTML) and I'm stuck on a table my teacher presented us for the long weekend (note that I'm on vacation so this is not counting towards any degree and I'm not seeing him until Tuesday). I gather that it's probably a very straightforward solution but I've been wrestling with it since the afternoon.
The linked-to image file shows the table he wants us to construct using nothing but HTML (no CSS). I'm supposed that there are those who'll descry this as not being modern technique but I imagine it wouldn't be bad to know how to at least achieve this using straight-up HTML.
The top row is one long box (say it has one unit of height), the second row from the top comprises two boxes of three units in height, the third from the top row is another long, one-unit high box on top of the bottom-most, one-unit-high five boxes, each of equal size.
The boxes are all empty of data though he drew two large X's in the large boxes][1] to show that THOSE cells would have 'X' placeholders and not be blank. [1]: https://i.stack.imgur.com/LK7oJ.png
The fledgling HTML code I've managed to come up with is this:
<html>
<head>
<title>Under the Table</title>
</head>
<body>
<center> <h2>Table Example</h1></center>
<center>
<table border="3">
<tr>
<th colspan="5"> </th>
</tr>
<tr>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
</tr>
</table>
</body>
</html>
Run the code and you'll see that while everything seems fine the second row with the triple-height boxes are compressed, leaving a large space in the right-hand part of the row. Just run the code and you'll see my issue.
Okay, so to summarize and state it explicitly: I am unable to create a table with eight empty boxes and two large (triple-height) boxes with a single character within them using nothing but HTML (I probably couldn't manage by any other means either but still). Any advice based both on the desired output (picture) and my last failed attempt (whose two large boxes in the second row are too small horizontally and leave an empty non-cell space)?
NB: I'm on vacation and this is not a degree course. Because I'm on additional holiday for a long weekend I was hoping for some input from people who know about markup language (and programming in general). Thanks for any help.
So the colspan argument does not accept a decimal. What you can do in this case is to simple multiply your columns by 2 so you get 10 for the first and third row which means the second row would be 2 instead of 2.50. You'll however probably not achieve a very good end result with that either since your 4:th will only be 50% (10% * 5) in the code you have.
I really don't want to give you all the anwers here if this is for school but you can play around with it if you want to see what happens.
Related
I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2
If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>
There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.
I have a webpage at http://bikepaths.com/Armstead/GBA1.html , and I have set up an HTML table to arrange text and pictures using rowspan such that the first column has a small amount of text above a tall picture, while the second column has a tall picture above a small amount of text.
<table>
<tr>
<td>George's first memory of note was ... </td>
<td rowspan="2"><img src="image/IM-GBA1885.jpg" height="440" width="280"></td>
</tr>
<tr>
<td rowspan="2"><img src="image/IM-JBA4-GBA.jpg" height="400" width="280"> </td>
</tr>
<tr>
<td>Also he recalled watching his half brother, James Benson Armstead IV <i>[on left]</i>, go through .... </td>
</tr>
</table><br>
So 3 rows, with rowspan=2 on each of the picture cells.
This displays as desired in both Firefox and Chrome, but the MS browsers I have tried (IE11 and Edge) both display it as a simple 2-row table, leaving massive amounts of space above and below each text cell.
I know MS should be banned from creating browsers until they learn what 'following standards' means, but until that happens, is there a workaround to make this display properly in IE and Edge?
<table style="table-layout:fixed">
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3">three colunms width</td></tr>
<tr><td colspan="2">two columns width</td><td>one column</td></tr>
<tr><td colspan="1">one column</td><td colspan="1">one column</td><td colspan="1">one column</td></tr>
</table>
note that the sum of the colspan attribute values or the sum of the number of td elements in each row equals the number of td elements established by the first (hidden, because the td cells are empty) row.
go to validator.w3.org/nu and copy and paste your markup into the direct input form and then press the validate button.... the w3 validators can detect where the number of td elements and the sum of colspan attributes does not match.
I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.
I have a table like this below. And there is a div container with information (usually large text), so I want to position these divs straight under each tr row to make them toggleable (like sliding panel). Can you please advise how to position it with CSS/Javascript? Though, this html is not semantic so if there is another way to do this without a div inside tr (I can't remove table in the code, but maybe some dd/dt?) - it'll be great!
<table width="100%" id="datatable" class="table-sortable">
<thead>
<tr>
<th id="th_name">Name</th>
<th id="th_email" class="table-th-sort ">E-mail</th>
<th id="th_birthday">Birthday</th>
</tr>
</thead>
<tbody>
<tr class="table-tr-group-head">
<td class="someclass">Name1</td>
<td class="table-td-sort">abc#abcd.com</td>
<td class="someclass">01.01.1981</td>
<div class="info">Large text1</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name2</td>
<td class="table-td-sort">def#abcd.com</td>
<td class="someclass">02.02.1982</td>
<div class="info">Large text2</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name3</td>
<td class="table-td-sort">ghi#abcd.com</td>
<td class="someclass">03.03.1983</td>
<div class="info">Large text3</div> <!-- this one -->
</tr>
</tbody></table>
P.S I cannot inject another tr row after each like <tr><td> </td><td><div class="info">Large text</div></td><td> </td></tr> because this table is generated by Javascript and somehow when I make it there is a data shift.
Moo, I fought with this one for quite a while on my app....there's no simple solution really. Datatables can't handle colspans, which limits the ability to add rows as you've noticed. Unless you want to do some creative spanning of divs the old fashioned way, adding a row is basically out. Since Datatables has such tight control of the table syntax, doing some sort of shifting via CSS could be theoretically possible, but incredibly difficult....but I suspect if you went this route, you'd be doing a massive jumble of javascript inner html insertion.
After banging my head for quite a while, I settled for Qtip (http://craigsworks.com/projects/qtip/) I have the tip pop under the row it was triggered from via context and css, which gives a quasi-illusion of the table shifting. For a while I considered dumping Datatables, but I found that our customers really appreciate the functionality that it provides and others don't even come close. As an added bonus, it's very easy to setup and is very customizable.
Good luck.