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>
Related
I have a Flask application that takes a bunch of input from the users, processes it and generates a table/matrix of values.
I want to display this table to the user with different colors for different cells. At the time of the table generation I know what color I want the cell to be.
I am using Bootstrap4. Can this be done using Bootstrap?
The class attribute can be used in the table row to get the required colors.
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>ABC</td>
<td>10</td>
</tr>
<tr class="danger">
<td>DEF</td>
<td>20</td>
</tr>
<tr class="info">
<td>GHI</td>
<td>30</td>
</tr>
<tr class="success">
<td>JKL</td>
<td>40</td>
</tr>
<tr class="warning">
<td>MNO</td>
<td>50</td>
</tr>
</tbody>
</table>
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr> elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
This is the way to add color on cells
<!doctype html>
<html lang="en">
<head>
<title>Table Color</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
More about table
table documentation bootstrap 4
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
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
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>
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>