Making a simple table and I noticed something odd when I was trying to do something with alternate rows and javascript and it did not work. When I looked at the page in inspector in Firefox and Chrome I noticed extra rows between each one of my rows. It even does it when I just have the table with no CSS or JS.
I can work around this it's not not a problem I am just wondering why they are there?
This is my page:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>table test</title>
</head>
<body>
<table>
<tr>
<th>title 01</th>
<th>title 02</th>
</tr>
<tr>
<td>thing 01</td>
<td>attribute 01</td>
<tr>
<tr>
<td>thing 02</td>
<td>attribute 02</td>
<tr>
<tr>
<td>thing 03</td>
<td>attribute 03</td>
<tr>
</table>
</body>
</html>
This is what the code looks like in Firefox inspector:
On the 2nd, 3rd and 4th rows you're using an opening <tr> where you should be using a closing </tr>
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>table test</title>
</head>
<body>
<table>
<tr>
<th>title 01</th>
<th>title 02</th>
</tr>
<tr>
<td>thing 01</td>
<td>attribute 01</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
<tr>
<td>thing 02</td>
<td>attribute 02</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
<tr>
<td>thing 03</td>
<td>attribute 03</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
</table>
</body>
</html>
Related
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>
!DOCTYPE HTML
<HTML>
<Head>
<Title>fci<\title>
<\head>
<Body>
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
<\body>
<\html>
Actually your question is not delivered properly, anyhow there's markup errors in your code. Your code should be as follows,
<!DOCTYPE html>
<html>
<head>
<title>fci</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
</body>
</html>
To close a HTML tag you should use forward slash '/'
example: <h1></h1>
Im new to Selenium IDE on Firefox and having iFrame issues. When Selenium runs "selectframe" I get an error iframe not found. Im not familiar with xpath or webdriver so I wouldn't know how to fix it using that. I've attached a screenshot of the iFrame. I also can't find the name of the iFrame.
Error message is : "[error] Element recurlyHostedField:number not found"
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://www.test.com/" />
<title>LCPayment</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">LCPayment</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/all-access/subscription/payment/</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=AA_LC_TRIAL_MONTHLY</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=first_name</td>
<td>test</td>
</tr>
<tr>
<td>type</td>
<td>id=last_name</td>
<td>testing</td>
</tr>
<tr>
<td>type</td>
<td>id=address1</td>
<td>5643 street</td>
</tr>
<tr>
<td>type</td>
<td>id=city</td>
<td>los angeles</td>
</tr>
<tr>
<td>select</td>
<td>id=state</td>
<td>label=CO</td>
</tr>
<tr>
<td>type</td>
<td>id=postal_code</td>
<td>90023</td>
</tr>
<tr> \\this is where the error happens. when I run selectFrame an error appears "[error] Element recurlyHostedField:number not found"
<td>selectFrame</td>
**<td>recurlyHostedField:number</td>**
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=recurly-hosted-field-input</td>
<td>4111 1111 1111 1111</td>
</tr>
</tbody></table>
</body>
</html>
enter image description here
I have a table in which I need to split into 2 columns which contain 30% of the image and 70% of the contents. In the 30% of image section
1.I need a big image
2. Below that, I need 4 small images
HTML:
<table>
<thead>
<th style="width:30%">Image</th>-- I want this to be 30% of the table heading
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
</thead>
<tbody>
<tr *ngFor="let data of dataa>
<td> </td>-- I want this to cover 30% of the table, it should have one big image which combines 2 rows and below that, I need small 4 images with 2 images in each row
<!-- This should be 70% of table column -->
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
<!-- 70% ends here -->
</tr>
</tbody>
</table>
Do you want something like this. The below class is to remove the space between the images.
.images {
text-align:center;
}
th.width{
width:30%;
}
<table>
<thead>
<th class="width">Image</th>
<th>Data1</th>
<th>Description</th>
<th>Address</th>
<th>Website</th>
<th>Phone No</th>
<th>E-mail</th>
<th>Images</th>
<th>Comments</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>
<div><img src="http://via.placeholder.com/400x150" width="100%" /></div>
<div class="images">
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
</div>
</td>
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
</tr>
</tbody>
</table>
Try using bootstrap's grid system. It should do the trick and give you a nice responsive table aswell. You can get bootstrap from: here After including bootstrap try using the classes for tables and the grid system for styling the table.
Example source
Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hope this helps!
Here is the html for a simple jsp page, all the <th> tags are invalid location. I am following a guide of the same type of project I am trying to do and this is how the guide is too..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Doctors</title>
</head>
<body>
<div align="center">
<h1>Doctor List</h1>
<h3>New Doctor</h3>
<table border="1">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete
</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
EDIT: Thanks for the quick answers
Add <tr> tag and place all <th> in between that.
Like This:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Doctors</title>
</head>
<body>
<div align="center">
<h1>Doctor List</h1>
<h3>New Doctor</h3>
<table border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
</tr>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete
</td>
</tr>
</c:forEach>
</table>
</div>
I hope this will solve this issue.
looks like you just need some table rows, but lets add tbody and thead for safe measure:
<table>
<thead>
<th>Id</th>
<th>Name</>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
</thead>
<tbody>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete;
</td>
</tr>
</c:forEach>
</tbody>
</table>
I need need to use page break inside table rows. But the problem is when i use page break after row(tr), that row(tr) is drawing till end of page when printing. Any ideas to fix this problem.
source:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<table border="1" >
<thead>
<tr><th>heading</th><th>heading 2</th></tr>
</thead>
<tfoot>
<tr><td>footer 1</td><td>footer 2</td></tr>
</tfoot>
<tr>
<td>x</td> <td>x1</td>
</tr>
<tr>
<td>x</td> <td>x2</td>
</tr>
<tr>
<td></td> <td>
<div style="page-break-after: always;"></div>
</td>
</tr>
<tr>
<td>x</td> <td>x3</td>
</tr>
</tbody>
</table>
</body>
</html>
screen shot:
first page,
second page,
the reason is <div style="page-break-after: always;"></div>
always - Always insert a page break after the element
For instance, with avoid value the issue is not observed on the print page.
CSS page-break-after Property