I think I'm losing my mind, here is some very simple code. It works perfect in Firefox, but since the recent Chrome update (Version 91.0.4472.114), Chrome seems to ignore the width of cell 1 once colspan appears later in the table.
Any ideas?
<table width='773' border='3' cellspacing='0' cellpadding='0'>
<tr>
<td colspan='3'>Testing
</td>
</tr>
<tr><td width='260'>hello</td><td width='126'>hello</td><td width='387'>hello</td></tr>
<tr><td width='260'>hello</td><td colspan='2'>Nuclear fission was discovered in December 1938 by physicists Lise Meitner and Otto Frisch, and chemists Otto Hahn and Fritz Strassmann. Fission is a nuclear reaction and process of radioactive decay in which the nucleus of an atom splits into two or more smaller, lighter nuclei. The fission process releases a very large amount of energy. The discovery that a nuclear chain reaction was possible led to the development of nuclear power and nuclear weapons. Hahn and Strassmann bombarded uranium with slow neutrons, and discovered that barium had been produced (illustration pictured). Meitner and her nephew Frisch theorised, and then proved, that the uranium nucleus had been split, and published their findings in Nature. Meitner calculated that the energy released by each disintegration was approximately 200 megaelectronvolts, and Frisch observed this. By analogy with the division of biological cells, Frisch named the process "fission".</td></tr>
</table>
Related
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.
I'm having trouble getting a scroll bar to show for a school project. I've tried debugging, looking up different ways to fix this and trying all different types of codes. I, however, still can't get a scroll bar to show up.
Here's a preview of the code:
<html>
<title>Cloud 9 HyperX</title>
<body background="test.png" alt="" style="position: fixed;>
<center><img src="Cloud9.png" title="Power Rankings -- Cloud 9"><br></center>
<center>Cloud 9 LCS Page || Gamepedia
<hr width=75% size=5 color=00aced>
<h1>Pro E-Sports Players, LCS Team</h1>
<img src="C9team.png" title="Ultra Rapid Fire TSM vs C9"><br>
<p>Cloud 9 HyperX is a League of Legends Championship Series team consisting of<br>
<TABLE>
<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">
</TH>
</TR>
<TH>Name</TH>
<TH>Role</TH>
<TR>
<TD>Hai "Hai" Lam</TD>
<TD>Mid Laner</TD>
</TR>
<TR>
<TD>An "Balls" Le</TD>
<TD>Top Laner</TD>
</TR>
<TR>
<TD>William "Meteos" Hartman</TD>
<TD>Jungler</TD>
</TR>
<TR>
<TD>Zachary "Sneaky" Scuderi</TD>
<TD>ADC (Attack Damage Carry)</TD>
</TR>
<TR>
<TD>Daerek "LemonNation" Hart</TD>
<TD>Support</TD>
</TR>
</TABLE>
<!--My favorite thing to do on the weekend is play video games with my friend Tim Fish and Jake McGraw and watch LCS-->
<p>Cloud 9, previously Quantic Gaming, first entered the LCS with the line-up of<br>
Nientonsoh(Team Fusion), Hai, LemonNation, WildTurtle(Team Solo Mid), <br>
and Yazuki. While Team Quantic they tried to enter the LCS qualifiers, <br>
but lost their first run. After their first lost in the LCS qualifiers,<br>
they took on a major roster change.<br></center>
<p align="left">
<ul>
<li>Yazuki left, Balls came in for top lane
<li>WildTurtle moved to TSM, Sneaky came in for ADC
<li>Neintonsoh left leaving mid open, Hai moved to mid from previously being jungle
<li>Meteos stepped into jungle to complete what was Quantic Gaming.<br>
</ul></p><center>
After the roster change Quantic went through LCS qualifiers again, only this time<br>
under the name of Cloud 9. After entering the LCS Cloud 9 won two LCS<br>
seasons and finished in the top eight for Season 3 World Championship.<br>
If you remove this declaration
style="position: fixed;
Your scrollbars will appear, when needed.
In general, and this is out of the scope of your question but, your markup has quite a few mistakes, just so you know. Maybe this can help you improve http://www.htmldog.com/guides/html/
I've got two TD's at the bottom left of my HTML email layout, but the first is not taking effect of the 140px width I've set, any obvious reason why?
http://jsfiddle.net/5xqvj/
<td class="blue-table" width="375px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" />
</td>
</tr>
<tr>
<td class="blue-table" width="20px"></td>
</tr>
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" />
</td>
</tr>
<tr>
<td>
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
<tr>
<td width="140px">
<p><strong>Cars</strong><br />
2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
</p>
</td>
<td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
</tr>
</table>
</td>
Looks like you've got two cells in your final row - and only one cell in each row above that. This means your table is effectively two columns wide, with the picture of the car in a tacked-on column by itself. This will be messing up the width calculations.
One way to handle this is to make the one-cell rows span two columns each, and leave the two-cell row as is. colspan will do this, and it is applied something like this:
<tr>
<td colspan="2">
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
You need to do this to every row.
This should give your width settings more predictable results.
You can double-check your table layout by giving your table cells a temporary border with CSS like this:
td {
border: 1px solid red;
}
Edit
Potentially a better solution would be to use CSS, and float: right the picture of the car (add a margin or padding to put some space around it). Then you can treat everything inside <td class="blue-table" width="375px" valign="top"> like a normal set of paragraphs and images and avoid colspan altogether. There is a long post about the merits or otherwise of using tables for layout here if you're interested: Why not use tables for layout in HTML?
Try this:
<td width="140">
or
<td style="width: 140px">
I'm using the plugin to generate QR code.
It should generate QR as image, however it generates as table like the code below.
Then this QR code is up to 1800 lines.
For now I'm putting this code in the top of the page contents.
In my guess, Google robot will be getting tired of analyzing this gigantic useless Table tag.
Should I remove this QR code table? or It doesn't really matter?
Anyone has any idea about this?
<div class="qrcode">
<table>
<tr>
<td class="black"/>
<td class="black"/>
<td class="black"/>
<td class="black"/>
<td class="black"/>
<td class="black"/>
<td class="black"/>
.
.
.
<td class="black"/>
<td class="black"/>
<td class="white"/>
<td class="white"/>
<td class="white"/>
<td class="white"/>
</tr>
</table>
</div>
Google robot will be getting tired of analyzing this gigantic useless
Table tag
Googlebot will not get tired of indexing your page. However, Google search result list includes pages on which the searched keywords were located not further than 520 KB from the start of the page. So if you put lots of "useless Table tag" in the beginning of the page and the relevant content will be located after 520 KB then your search results will be affected.
Please have a look on Search Engine Indexing Limits: Where Do the Bots Stop? article which describes limitations of different web spiders.
But long pages with useless code can also affect your customers' experience. It is very likely that long page will take more time to display. Increasing page load time by even 100ms (which seems to be not that much) might be dangerous for your website.
Please check Milliseconds are Money article to get more details on that. A few quotes from that article:
The big guys in the cloud industry have really dug deep and proved
that those milliseconds matter:
For every 100ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007).
Google discovered that a change from loading a 10-result page in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).
I hope that will help you to make right decisions regarding your website page structure.
I'm finishing up a midterm project for an HTMl course and I'm working on my last page. Problem is, the table overflows to the right (when the browser isn't maximized) and I can't figure out how to fix it. Can anyone help?
I can't post a pic. (No rep)
The HTML:
<div id="rightcolumn">
<h2>Fuel Cells</h2>
<!--3 Column by 3 Row Layout using a Table-->
<table width="100%" border="0" cellpadding="6">
<caption>Fuel Cells as a Source of Green Energy</caption>
<tr>
<td colspan="3">The research and development of fuel cells is extremely important. Fuel cells are an important technology because they use hydrogen to create energy. Hydrogen is the most plentiful element in our universe, quite unlike oil. If the US ran on fuel cells we would finally be independent from oil. Also, hydrogen doesn’t need to be “mined” like oil. If we no longer needed oil we would save on the price we have been paying for decades. Hydrogen is both extremely abundant and a renewable resource. If hydrogen was used as our primary power source we wouldn’t ever need to worry about running out of it, like we do with oil and other fossil fuels. A cloudy day can stop solar panels from generating much electricity and a still day can stop wind power. With hydrogen however, weather wouldn’t affect the quantity of power fuel cells produce. This makes fuel cells far more reliable than other, alternative forms of “green” energy.
</td>
</tr>
<tr>
<td ><img src="FuelCellDiagram.png" width="335" height="232" alt="How Fuel Cells Work" /></td>
<td><img src="FuelCellhome.png" width="345" height="250" alt="Fuel Cell Powering Home" /></td>
<td><img src="FCCar.GIF" width="400" height="347" alt="How Fuel Cells power Cars" /></td>
</tr>
<tr>
<td colspan="3">Fuel cells are important because of their harmless byproducts. Water and heat, the byproducts, aren’t dangerous and could actually be useful. The heat generated by fuel cells could be used to heat homes or water, making fuel cells even more efficient. Fuel cells would allow us to power our cars as well as our homes. This would lead to an end of the use of gasoline or battery powered vehicles. Although cars are becoming more efficient, they are unable to match the efficiency of fuel cells. Our current gas powered vehicles produce harmful pollutants during fuel combustion. Battery powered vehicles are also harmful because of the pollutants that are byproducts of both creating and disposing of them. If the world could end its dependence on oil and transition to fuel cells, our pollution levels would be a fraction of what they are now. In China, many cities are filled with smog because of the way they are powered. If China were to replace their coal plants with fuel cells, the ever increasing smog throughout China would begin to fade. Also, we would no longer have to worry about pollution from oil spills or oil wells.
</td>
</tr>
</table>
<!--End of Columns/Table-->
</div>
and the CSS is:
#container {
margin: auto;
width:80%;
min-width:700px;
background-color:#93A5C4;
color:#000000;
border: 2px double #000000;
}
#rightcolumn {
margin-left:140px;
background-color:#ffffff;
color:#000000;
padding:10px;
}
td, tr, th {
padding: 10px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
I can't edit the rightcolumn CSS though because I need it like that to display the other pages properly and I'm only allowed to use one CSS sheet for the entire site.
A quick solution would be to add a style of "overflow:scroll" in your declaration for the rightcolumn div.
<div id="rightcolumn" style="overflow:scroll">