:
So I need to build this kind of a site without using anything but HTML (no CSS). And I'm having issues aligning the upper text (I can only use align="right" but it puts it and the end of the site), and I can't seem to make that table. Here's my code so far:
<html>
<p size="12px" align="right"><b>Janez Novak</b></p>
<table border="1" style="width:20%">
<tr>
<td align="left" width=><p align="center" rowspan="5"><b>test</b></p><br/></td>
<td>um feri</td>
<tr>
<td align="left" width=><p align="left"><b>Telefon</b></p></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left" width=><p align="left"><b>Telefaks</b></p></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
</html>
Does this solve your problem:
<html><body>
<table width="600" align="Center">
<tr><td align="center">
<h1>Janez Novak</h1>
<i>Univ. dipl. inz. | Univ. dipl. ing.</i>
<h2>Raziskovalec | Researcher</h2>
</td></tr>
<tr><td align="Left">
<table border="1">
<tr>
<td rowspan="3" align="Center" valign="Top"><b>Naslov:</b></td>
<td>UM FERI</td>
</tr>
<tr>
<td>Smetanova Ulica</td>
</tr>
<tr>
<td>2000 Maribor</td>
</tr>
<tr>
<td align="left"><b>Telefon:</b></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left"><b>Telefaks:</b></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
<tr>
<td align="right" colspan="2">www.feri.um.si</td>
</tr>
</table>
</td></tr>
</table>
</body></html>
Now the result looks like this:
Note that you also have to remove style="width:20%" because that's CSS.
rowspan is not a valid attribute of <p> elements. In order to replicate what is shown in your image, use the following code:
<table border="1" style="width: 50%">
<tr>
<td align="left" valign="top" rowspan="3"><b>Address:</b></td>
<td>1 Test Street</td>
</tr>
<tr>
<td>Testington</td>
</tr>
<tr>
<td>Testshire</td>
</tr>
<tr>
<td valign="top"><b>Telefon:</b></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td valign="top"><b>Telefaks:</b></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
jsFiddle Demo
First of all, there's an error in your HTML in your table:
<table border="1" style="width:20%">
<tr>
<td align="left" width=><p align="center" rowspan="5"><b>test</b></p><br/></td>
<td>um feri</td>
</tr> <!-- Added missing tr closing tag -->
<tr>
<td align="left" width=><p align="left"><b>Telefon</b></p></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left" width=><p align="left"><b>Telefaks</b></p></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
Second: How is it that you can't use CSS, but are using the style attribute on your table, this is virtually the same as CSS.
Third, a possibility here is to wrap the <table> in a <p> or a <div> and move the entire parent element
Related
I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding table-layout: fixed to both your <table> elements.
If U want to use a table header I suggest using <th> (see here)
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%">test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
Looks like you missed a closing tag for a <TD>(<td width="10%">test6</td>). Hope this helps. Let me know
I've added a table inside a table.
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
But I want "TEST" values under col1 and numeric values under col2. Currently all values are shown under col1.
Edit - Actual Code
<tr>
<td colspan="10">
<table class='<%= "table"+count%>' style="display:none" border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<nested:iterate property="equipC" id="equipmentFormBean" indexId="ffIndex" >
<tr class='<%= "table"+count%> dataOff' style="display:none">
<td align="right" ><nested:write property="equipInitial" /> </td>
<td ><nested:write property="equipNum" /> </td>
</tr>
</nested:iterate>
</table>
</td>
</tr>
How to do it?
Use Google chrome...Your html code is right.On my PC I see the values are in COL2.
Use Forgot to use table heading heading tag "th"
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<th>col1 </th>
<th>col2</th>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
Your HTML code is correct. With the html provided by you it displayed the tables properly. You may please see it here # FIDDLE - http://jsfiddle.net/BRxKX/4986/
Problem could be with dynamic generation of tables and mostly around COLSPAN if at all its being used in your dynamic code.
Here is code that I tested (you can see this in - http://jsfiddle.net/BRxKX/4986/)
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am writing a selenium java code and at a particular webpage i want to select a link from a group of links where each link has an emebeded text within a table. How can i select particular link at this situtation. for eg.
run title--text 1
run title--text 2
run title--text 3
how can select specific run link for a specific title text? the text is not a label rather it is just simple text on the webpage.
i am using the following code:
verify.text("text 1");
it will only verify the presence of text, it wont go towards the link as link of every execution is named RUN. so it will identify the corresponding run link? The HTML code for the above is:
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
<div align="center"><table class="module" width="630">
<tr>
<th class="banner" width="70">ACTION</th>
<th class="banner" width="560">REPORT TEMPLATE</th>
</tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com/">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.zxc.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Performance by Priority</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing"> Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Performance by Priority</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.cxd.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Trend Analysis Report</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing">Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Trend Analysis</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.sdfds.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.asdg.com">UnShare</a></td></tr>
</table>
</DIV>
</td>
</BODY>
</HTML>
Get a list of web elements and iterate over them.
This is not tested
E.g.
List<WebElement> we = findElements(By.cssSelector("tr a"));
Iterator itor = we.iterator()
While(itor.hasNext()) {
WebElement we = itor.next();
if (we.getText().equals("your visible text")) {
we.click // click link
}
}
I'm trying to build a table like this:
Here is my solution:
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
</tr>
<tr><td rowspan="3"></td><td rowspan="2"></td></tr>
<tr><td rowspan="2"></td></tr>
</table>
</body>
</html>
It seems to be logical, but it doesn't work at any browser. Is there any way in HTML to build such table?
You only had 3 rows, so that was never going to work. As you defined your first cell with rowspan="6" then you need at least 6 rows.
You can layout the cells by imagining 6 rows across the diagram and then you can see which row a given cell starts. The following diagram shows the each cell in order of first encounter;
So the following code will produce that layout;
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"> </td> <!-- Box 1 -->
<td rowspan="3"> </td> <!-- Box 2 -->
<td rowspan="2"> </td> <!-- Box 3 -->
</tr>
<tr></tr>
<tr><td rowspan="2"> </td></tr> <!-- Box 4 -->
<tr><td rowspan="3"> </td></tr> <!-- Box 5 -->
<tr><td rowspan="2"> </td></tr> <!-- Box 6 -->
<tr></tr>
</table>
</body>
</html>
The s were so I could see the structure.
Hope this helps.
Try this instead:
<table style="border: 1px solid #999">
<tr>
<td rowspan="4"> </td>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
jsFiddle example
You can stick with 6/3/2 rowspan, but you need to include the empty rows you are spanning. For example:
<table border="1px">
<tr>
<th rowspan="6">6</th>
<td rowspan="3">3</td>
<td rowspan="2">2</td>
</tr>
<tr><!-- empty row --></tr>
<tr><td rowspan="2">2</td></tr>
<tr><td rowspan="3">3</td></tr>
<tr><td rowspan="2">2</td></tr>
<tr><!-- empty row --></tr>
</table>
Fiddle riddle diddle
<html>
<body>
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" height="100%">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
</body>
</html>
How do I get the column to be 100% of the table height but the other columns must keep their height?
Because I want to put a widget in there but I have to work in my boss his cms and I am not allowed to make new divs :(
Try rowspan:
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" rowspan="5">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
Example
JSFiddle Example
Use rowspan="5" in that TD.
Rowspan attribute, tells your element to "get the height" of 5 rows in this case.
If you have dinamic content remember to update this value to the actual number of rows of your table.