What is Button element in HTML - html

This is my sample code
Thanks a lot for looking at my code:
<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<style>
</style>
</head>
<body>
<center><h2>calculator</h2></center>
<table border="5px" width="400px" cellspacing="30px" cellpadding="20px" align="center">
<tr>
<td style="border:0;font-style:red"><center><h3>CASIO</h3></center></td>
</tr>
<tr>
<td colspan="3" style="border:0px">
<input type="text" id="txtans" style="width:250px;height:25px;font-size:20px" dir="rtl">
</td>
<td style="background-color:rgb(212, 212, 12)">clear</td>
<td style="background-color:red">on/of</td>
</tr>
<tr>
<td style="background-color:gray">mc</td>
<td style="background-color:gray">mr</td>
<td style="background-color:gray">m-</td>
<td style="background-color:gray">m+</td>
<td style="background-color:gray">HMS</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
<td style="background-color:cyan">ac</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
<td>%</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">+</td>
<td>/</td>
</tr>
<tr>
<td>0</td>
<td>+/-</td>
<td>.</td>
<td>=</td>
</tr>
</table>
</body>
</html>
Please help me add "button" functionality in this code so that when I run this program in my browser I can click the number buttons and work on calculation!


A very simple approach to try to explain to you :
https://jsfiddle.net/wqo6Lxks/
<td onclick="document.getElementById('txtans').value += 3">3</td>
<td onclick="eval(document.getElementById('txtans').value)">=</td>
Each td needs an action (onclick) to insert his content into txtans, and = eval() calculate this string.

Related

how to create an html table with specific rows and columns

I had a problem while creating a small table with specific details like in the pic enter image description here
I did this code but it doesn't give the wanted results
<html>
<head>
<style>
table,td,th{border: 2px solid gray; text-align:center}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>

Use </td> instead of <td> for the closing tags of boxes 6 and 7. The colspan for box 2 is not necessary. The other three colspans were too large. This code should get you to Figure 2.
<table width="30%">
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="3">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>

This would make the first figure:
<table width="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="4">5</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>

There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/

HTML CSS Table Design Guidance

I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.

Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!

How to show row have spacing in html?

My Code is......
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Row two doesn't show. How can I do it?

<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td > &nbsp</td>
<td >&nbsp</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Have you tried adding <td> </td> ?

Making an html - table to match the design

I was trying to create the following table. Could anyone help in figuring out what I did wrong?
Desired:
Current:
http://jsfiddle.net/EV5Yz/
Code:
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td colspan=6>2</td>
</tr>
<tr>
<td colspan=6>9</td>
</tr>
<tr>
<td colspan=6>10</td>
</tr>
</table>

Changes to be made:
4 - 8 need to be in row 2
4 should not have a colspan=2 (it's no different than 5-8)
Your colspan=6 should all be colspan=5
http://jsfiddle.net/a7S6h/1/
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=5>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=5>9</td>
</tr>
<tr>
<td colspan=5>10</td>
</tr>
</table>

DEMO
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=5>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=5>9</td>
</tr>
<tr>
<td colspan=5>10</td>
</tr>
</table>

try this
<table width="100%" border="1">
<tr>
<td rowspan="4" align="center">1</td>
<td colspan="5" align="center">2</td>
<td rowspan="4" align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td colspan="5" align="center">9</td>
</tr>
<tr>
<td colspan="5" align="center">10</td>
</tr>
</table>
Demo
http://jsfiddle.net/EV5Yz/3/

<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=6 align="center">2</td>
<td rowspan=4>3</td>
</tr>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
<td colspan=6 align="center">9</td>
</tr>
<tr>
<td colspan=6 align="center">10</td>
</tr>
check at fiddle

Try this code :
<table border=1 style="text-align:center;width:50%;">
<tr>
<td rowspan=4>1</td>
<td colspan=6>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=6>9</td>
</tr>
<tr>
<td colspan=6>10</td>
</tr>
</table>
One thing is make text align to center and give some width to your table.

Table within a table

I'm writing a code for the following table (I have to use table inside table)
Here is my code :
<html>
<body>
<table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</table>
</body>
</html>
But in browser I'm getting something different, looking like this :
I'm very beginner with HTML, I'm trying to understand how tables within tables work mostly by doing exercises for that.

This can be accomplished with one table:
HTML
<table border=1 >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
JS Fiddle: http://jsfiddle.net/HcRW3/

your rowspan in the 3rd row can't work as the table has only one row. It doesn't know anything about the outside table.
I really can't understand why you have to go with table in table, but if you must, the outer table can only have 3 rows and the 3rd nested table has two rows.

May well work better for you:
<html>
<body>
<table border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td style="border-bottom: none;">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td style="border-top: none;"></td>
<td>17</td>
</tr>
</table>
</body>
</html>

This is not an answer, but just an extension to my comment, to explain the result.
table is not a valid child of tr, only th and td are valid as child of tr.
For most browsers the behavior if they detect an invalide child inside of an element is, to move the child after that element. This is repeated until the structure is valid.
Because table is neither a valid child of tr nor of table the innter tables are all moved outside of the surrounding table. The resulting structure the browsers most likely creates out of your original code of the question:
<table>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</tr>
</table>
would then be:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

May I advise you use colspan and Rowspan instead of tables inside tables it much easier and how I do most of my tables which require cells to be merged.
You can find an example of colspan here:
http://www.w3schools.com/tags/att_td_colspan.asp
and an example of rowspan:
http://www.w3schools.com/tags/att_td_rowspan.asp
Here is an example of the code to do this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td >3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td >11</td>
<td rowspan="2">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td >15</td>
<td >16</td>
<td>17</td>
</tr>
</table>

I'm pretty sure you should be able to do this in one table. Like this,
<table border=1 cellspacing=0>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=3>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<tdrowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

You should try not to put a table inside a table. "Rowspan" and "colspan" are a good idea. You'd probably want to use 'valign' top (vertical align) to make sure the 12 stays on the same level as the row.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan="2" valign="top">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>