I had a table
<td colspan="6">
<table width="100%" border="0">
<tr align="center">
<td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>
<td width="7%"><strong>Item Id </strong></td>
<td width="20%"><strong>Item</strong></td>
<td width="17%"><strong>Type</strong></td>
<td width="17%"><strong>Rate</strong></td>
<td width="17%"><strong>Quantity</strong></td>
<td width="17%"><strong>Price</strong></td>
</tr>
I am representing the table through <DIV> like This
<div id="table">
<div class="row" id="row" align="center">
<div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>
<div id="cell"><strong>Item Id </strong></div>
<div id="cell"><strong>Item</strong></div>
<div id="cell"><strong>Type</strong></div>
<div id="cell"><strong>Rate</strong></div>
<div id="cell"><strong>Quantity</strong></div>
<div id="cell"><strong>Price</strong></div>
</div>
but I can't find any replacement for colspan="6". Can anyone help?
OK, let's get this straight for the 100th time.
Tables are not evil.
Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.
In HTML. Tables.
Misusing elements is evil
Using any element for the wrong reason is wrong.
h1 for images
table for layout
button for links
These things are wrong. And bad.
Summary
Use tables for tables, not for layout, and everyone will be happy.
Div do not use concept of columns. You can have as many as you want, div's in a row. You can fix width of div and then can use them to build up table. By the way you can go for css framework like bootstrap will be much more efficient.
Make the div width in such a way that, it will occupy "TD" sections.
For that you just need to add one more class with some higher width in it and some less div on the new row.
Related
I have this code for a table and all my widths for my table work except for the last search function cell which is suppose to have a width of 42.5%, but shows 20%. I am not too sure what is going wrong.
<table class="mytable-body">
<tr>
<td height=50px style="background-color: #4472C4" colspan="4">Français </td>
</tr>
<tr>
<td width=20%> <img src="VIA_Logo_2.png" /></td>
<td width=60%>
<div class="header1">
<h1>CAE AT YOUR HAND</h1>
</div>
</td>
<td width=20%> <img src="LOGO_RGB.png" /></td>
</tr>
<tr>
<td width=15% style="background-color: #4472C4" rowspan="2">
<label>
<h2>Our Recommended Favorites</h2>
<select size=9 id="myList" class="list-content" onchange="setPicture();">
</select>
</label>
</td>
<td width=42.5%>
<input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search for start location..." title="Location">
<!--the seperate code not working-->
<label><select size=3 id="myList-1" class="list-content"></select></label>
</td>
<td width=42.5%>
<input type="text" id="mysearchInput2" onkeyup="mysearchFunction2()" placeholder="Search for end location..." title="Location">
<label><select size=3 id="myList-2" class="list-content" onchange="setPicture2();"></select></label>
</td>
</tr>
<tr>
<td colspan="2" width=70% style="background-color: aliceblue">
<div id="qrcode"></div>
<div id="qrcode2"></div>
</td>
</tr>
</table>
Your HTML doesn't make sense.
For one you need to have the same number of cells (or add up the colspans to the same number) in each row:
In the first row you have a single cell with a colspan of 4.
In the second row you have 3 cells.
In the third row you have 3 cells, one with a colspan of 2, which totals to 4 (2 + 1 + 1)
In the forth row you have a single cell with a colspan of 2.
All those bold numbers must be identical for a table.
Then the whole point of tables is that the cells form columns are always the same width.
Currently you have (for example):
In the second row the first two cells have a total width of 80% (20% + 60%)
In the third row the first cell with colspan of 2 has a width of 15%.
In the fourth row the first cell with colspan of 2 has a width of 70%.
Again, all those bold numbers must be identical.
Also all percentages per row need to add up to 100% (or have at least one cell without a width which will then take up the rest of the space).
It seems you are trying to miss-use a table for layout. Tables are for tabular data. For page layout look at CSS grids, but you'll want to use a separate grid for each of your "rows".
One more thing: Don't leave out quotes around HTML attribute values. It will lead to errors.
You should be using the 'colspan' attribute to make a table with a divergent number of cells in each row. Also I'd recommend using CSS instead of the ancient "height=50px" notation.
<tr>
<td colspan="3" style="height: 50px; background-color: #4472C4" colspan="4">Français </td>
</tr>
so i am currently re making the site for my university's drama department and i want to add 3 images side by side (with spacing between them). They also need to have captions. But the caption needs to have a header (that is styled differently than the caption itself) followed by the caption itself. having looked around here and other places i figured i would be able to do this using a table since formatting size would be easiest this way. I have been at this portion of the site for almost 1 month and have tried numerous other methods (divs, tables, etc.) I was wondering if someone else has done something like this and would be able to impart some advice. The site currently is located here: drama site. Any help would be appreciated (i hope this follows the guidelines, first time asker)
Edit: The following is the portion of the code i need help with:
function windowSize() {
var w = var w = document.getElementById('body').clientWidth;
document.getElementById('newsTable').style.width = w + 'px';
document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px';
}
<body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()">
<table id="newsTable" cellpadding="0" border="0">
<tr>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">1</td>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">2</td>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">3</td>
</tr>
<tr>
<td id="newsItems" align="center">4</td>
<td id="newsItems" align="center">5</td>
<td id="newsItems" align="center">6</td>
</tr>
</table>
</body>
I don't want the pictures to be as big as they are in the link, i would like them to be a bit smaller. I would also like some room between them. Currently when the page gets bigger the image starts to repeat. If i took the repeat off then it would have blank space where it would normally repeat
Probably the nicest option would be to use bootstrap. It can do a lot of the columner work for you. But if that sounds a little complex, here is a simple fiddle with three images side by side.
http://jsfiddle.net/44uv9a2m/
I'm just wrapping the images and their captions in divs, then giving them a fixed width.
.oneThird{
width:30%;
float:left;
margin:.5%;
}
.oneThird img{
width:100%;
}
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
* Edit *
This is a basic bootstrap example.
http://www.bootply.com/n6AdJPYIe3
EDIT: I did not construct this table myself. A table absolutely shouldn't be constructed this way and is a fix I'm implementing in the future. But the back-end code unfortunately depends on this exact table structure-each inner table has it's own class names and id's and trigger functions, etc.
I've got this problem working with a table made up of multiple tables - One table is the table itself, another table makes up the header, or <thead>, and another table makes up the <tbody>-there are also divs within the table cells (<td>) it looks like this:
<div id="myTableContainer">
<table id="myTable">
<thead>
<table id="myTableHeader">
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</table>
</thead>
<tbody>
<table id="myTableData">
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</table>
</tbody>
</table>
</div>
The problem is that there's some javascript working in the background to resize these table cells based on how much text is in them, but I can't align the header cells with the with the rows below them properly with CSS. I've experimented with the table-layout property and giving each td a max/min-width, but I'm stuck as to getting all the data & columns aligned because if many columns are created, the table gradually mis-aligns. What's more, both the inner tables are generated dynamically, so it's not as simple as restructuring the table as a whole. This table has proved very difficult to work with as it was developed for IE5 or 6 (works in Quirks mode all the way)
Does anyone have any ideas or sure-fire solutions on how to align this table properly? Preferably a CSS-based solution?
If you can't picture it, my table basically looks like this (and gets gradually worse if more columns are inside of it)
I hope I explained this well enough, if more info is needed I will provide
You should not have <table> tags inside <thead> and <tbody>. Your code should just look like this:
<div id="myTableContainer">
<table id="myTable" border="1">
<thead>
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</tbody>
</table>
</div>
I would correct the old code but in case you don't intend to, look for below hack:
I cannot think of a pure CSS solution. But how about CopyCSS (http://upshots.org/javascript/jquery-copy-style-copycss)?
You can call your copyCSS (you can selectively copy only width property). Question is how to detect if width of column changes?
For that you will have to take help of onresize event (http://www.w3schools.com/jsref/event_onresize.asp). For that you have to dynamically add onResize event to at least first row of your second (i.e. inside ) table.
I have the following HTML table set up which yields the result in the screenshot.
Code:
<table>
<tr>
<td align="center" colspan="4">
<img src="website_title_banner.png" style='width:100%;' alt="nul"/>
</td>
</tr>
<tr style="width:100%;">
<td>
<img src="About sign.fw.png" style='width:100%;'/>
</td>
<td>
<img src="gallery sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Products sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Contacts sign.fw.png" style='width:100%'/>
</td>
</tr>
</table>
Scrrenshot
I'd like to have it so the signs are 'nailed' to the striped banner. Given that the signs are all placed in their own table cell in the row, is it possible to make the 2nd row overlap with the first row by a specified pixel distance?
I'm reasonably proficient with HTML (but it has been a long time) but I am unfamiliar with CSS - so if the solution is to use CSS, a step by step implementation would be greatly appreciated (using Dreamweaver).
Thanks in advance!
Try styling your second row with a negative margin-top. This should make the .png's overlap the row above them. Here's an example based off of your code - http://jsfiddle.net/NinoLopezWeb/myv37cb0/1/
This is not the best way to do it, but if you really want to you can use a negative value in
margin-top, for example margin-top: 10px;
Not the cleanest way but it works.
quickest way to do this is have a negative margin. You can also make the stripes as the background of the menu.
OK, another quick question pertaining to this. I took the advice and it works great, my dilemma now is that there is a space between the tables.
I was going to attach a file but I guess I don't have the rep too quite yet.
Anyways, if you can go to http://www.wholesalecabinets.us/Wall-Cabinets_c_524.html, you'll see what I mean. See how the line is close at the tops of the tables and there is a space before the line starts again?
I know, I know... something easy for you guys.
Sorry, I'm a newb and I don't have much HTML experience, but I need some help with a problem.
Currently I have a website that has a bunch of product. I managed to get the products listing to be pretty close to what I want with the exception of one problem, I want the price to be on the same line as the [name] but to the far right. Currently it is under the description to the far right.
Any help is greatly appreciated.
Thanks,
Kevin
<table border="0" cellspacing="0" cellpadding="2" width="95%">
<tr>
<td rowspan="2" align="left" valign="top" class="item" style="width:75px;"><img src="thumbnail.asp?file=[THUMBNAIL]&maxx=50&maxy=50" alt="[name]" border="0" /></td>
<td class="item" align="left" valign="middle"><span class="item">[name]</span><br>
<span class="item">[description]</span></td>
</tr>
<tr>
<td class="item" align="right" valign="top"><span class="price">[ITEMPRICE]</span> [product_quantity]
<input type="hidden" name="item_id" value="[catalogid]" />
<input type="text" size="2" name="qty-[counter]" value="0" /></td>
</tr>
<img src="assets/templates/[template]/images/div.png" alt="template" vspace="2" width="95%" height="1" />
</table>
Delete these two lines
</tr>
<tr>
You're inserting a new row, when all you want is a new column on the same raw.
You should be able to achieve this by putting the price td in the same row as the name td.
The <tr> elements in your HTML are table rows. What you're looking for are columns. You cannot explicity define columns in HTML (HTML is one dimensional after all) but you can define td (table data) and th (table header) elements inside a row to effectively create a column. If you want your item name, description and price to all be on the same line, they need to be inside the same table row, represented separately as either <td> or <th> elements.