How to highlight independent table cells with same values - html

I have two independent tables. How to manage when I mouse over one of the cell on Table 1 then cells which have the same values on Table 2 turn highlighted? I prefer to use html/css coding, not JQuery?
I worked on code below but no success.
<HTML>
<STYLE type=text/css>
tr:hover td.highlight776{ background-color:red; }
tr:hover td.highlight970{ background-color:blue; }
tr:hover td.highlight1024{ background-color:magenta; }
tr:hover td.highlight1197{ background-color:yellow; }
tr:hover td.highlight1200{ background-color:orange; }
tr:hover td.highlight1015{ background-color:orange; }
</STYLE>
<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="CuteHTML">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<br><br>
Table 1
<Table border=1>
<tr>
<td class="highlight776">Proje 776</td>
</tr>
<tr>
<td class="highlight1015">Proje 1015</td>
</tr>
<tr>
<td class="highlight970">Proje 970</td>
</tr>
<tr>
<td class="highlight1024">Proje 1024</td>
</tr>
<tr>
<td class="highlight1197">Proje 1197</td>
<tr>
<td class="highlight1200">Proje 1200</td>
</tr>
</Table>
<br><br><br>
Table 2
<Table class="tahsis" border=1>
<tr>
<td class="highlight776">776</td>
<td class="highlight1015">1015</td>
<td class="highlight776">776</td>
<td class="highlight970">970</td>
<td class="highlight1024">1024</td>
<td class="highlight970">970</td>
</tr>
<tr>
<td>970</td>
<td>776</td>
<td>776</td>
<td>776</td>
<td>1015</td>
<td>1015</td>
<tr>
<td>1015</td>
<td>776</td>
<td>970</td>
<td>970</td>
<td>1024</td>
<td>970</td>
</tr>
</Table>
</BODY>
</HTML>

Related

How to create a table like this using only HTML?

Someone please help me creating a table like this using only HTML.
I can only create the first two rows,but the third one is difficult for me.

This table is just HTML, it's not exactly what you want but it can be helpful for your need.
<table border = "2">
<tbody>
<tr>
<td > 1 </td>
<td colspan = "12"> 2 </td>
</tr>
<tr>
<td rowspan="2"> 3 </td>
<td colspan = "5"> 4 </td>
<td colspan = "5"> 5 </td>
</tr>
<tr>
<td colspan = "3"> 6 </td>
<td colspan = "6" > 7 </td>
<td colspan = "3"> 8 </td>
</tr>
</tbody>
</table>

Your Desired Table :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
border: 5px solid black;
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
th,
td {
border: 5px solid black;
width: 100px;
overflow: hidden;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td colspan="4">2</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td colspan="2">4</td>
<td colspan="2">5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
<td>8</td>
</tr>
</table>
</body>
</html>

How to create a html irregular table?

enter image description here
I want to create an HTML irregular table like this.
enter image description here
but I don't know what's wrong with my code
<html>
<head>
<title>Test 2</title>
</head>
<body>
<table border="1" width="500px" height="100px">
<tr>
<td>Zoology</td>
<td rowspan="3">Welcome</td>
<td>Maths</td>
</tr>
<tr>
<td>Batany</td>
<td rowspan="3">Physics</td>
</tr>
<tr>
<td rowspan="2">Entomology</td>
</tr>
<tr>
<td rowspan="2">Heading</td>
</tr>
<tr>
<td>Toxicology</td>
<td>Computer</td>
</tr>
</table>
</body>
</html>
Please help!

<html>
<head>
<title>Test 2</title>
<style>
table, tr, td
{
border-collapse: collapse;
border: 2px solid black;
padding: 5px;
}
tr
{
height: 30px;
}
</style>
</head>
<body>
<table border="1" width="500px" height="100px">
<tr>
<td>Zoology</td>
<td rowspan="3">Welcome</td>
<td>Maths</td>
</tr>
<tr>
<td>Batany</td>
<td rowspan="3">Physics</td>
</tr>
<tr>
<td rowspan="2">Entomology</td>
</tr>
<tr>
<td rowspan="2">Heading</td>
</tr>
<tr>
<td>Toxicology</td>
<td>Computer</td>
</tr>
</table>
</body>
</html>

HTML: how to use colspan and rowspan?

I am trying to build a very simple array, but somehow It is not working How I think it should. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">sigle row of 8 cols</th>
</tr>
<tr >
<td colspan="2">2 cols </td>
<td rowspan="3" colspan="6" > 6 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
</table>
</body>
</html>
Please help me to debug.
I want the months to occupy only 2 column and the saving to occupy 6 columns (the rest), but, this is not working as expected. I know the answer is trivial, but I cannot find it. Can you please tell me what is wrong?

The table will have 8 columns, but you have effectively reduced it to 2. The table rendering algorithm will make things as efficient as it can.
By adding an additional row you can see what is happening
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">Monthly Savings</th>
</tr>
<tr >
<td colspan="2">January</td>
<td rowspan="3" colspan="6" >$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
What you are better off doing is assigning width to the columns
table, th, td {
border: 1px solid black;
}
<table width=100%>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr >
<td style="width:33%">January</td>
<td rowspan="3" style="width:66%" >$30000</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>

because the you add heading in single <th> so make id different
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
so it will display 2 for month and 6 for saving
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td rowspan="3" colspan="6">$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
</table>
</body>
</html>

I am finding difficulty in designing complex table using css

Here is html code for table i am having disorentation problem in resulting table. Kindly help.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td
></tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td> 1</td> <td>50</td> <td> 1.45</td>
</tr><tr>
<td>51</td> <td>100</td> <td>2.6</td>
</tr>
</body>
</html>
Resulting table is disoriented what can be done to make table's row of equal size.

Not sure I completely understand the question, but there were some problems with the closing tags in your code and one of the td rowspans, maybe that was why it wasn't rendering correctly. Try the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td>
</tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td>
<td>1</td>
<td>50</td>
<td>1.45</td>
</tr>
<tr>
<td>51</td>
<td>100</td>
<td>2.6</td>
</tr>
</body>
</html>

If fixing the closing and opening tags doesn't work, then (following your screenshot) the HTML markup should be something like this (just change the values);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color: #A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1a</th>
<th>1b</th>
<th>1c</th>
<th>1d</th>
<th>1e</th>
<th>1f</th>
</tr>
<tr>
<td rowspan="4">2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
<td>2e</td>
<td>2f</td>
</tr>
<tr>
<td rowspan="2">3a</td>
<td rowspan="2">3b</td>
<td>3c</td>
<td>3d</td>
<td>3e</td>
</tr>
<tr>
<td>4c</td>
<td>4d</td>
<td>4e</td>
</tr>
<tr>
<td>5b</td>
<td>5c</td>
<td>5d</td>
<td>5e</td>
<td>5f</td>
</tr>
</table>
</body>
</html>

HTML Table with 2 (two) rows set beside a 4 (four) row set

How would I achieve this table layout?

Here's a sample:
<!doctype html>
<html>
<head>
<title>Rows Demo </title>
<style>
table {
border: 1px solid black;
}
td {
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
</table>
</body>
</html>