I have a table which is like
You can see the border below Operation Research, under the course column. I want that border to be removed, but the code I've written is not working, what exactly should I do?
<html>
<body>
<table width="100%" border="1" rules="cols" style="border-collapse : collapse;">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>
</body>
</html>
Since it is border of table you have to remove that.
Use following code
<html>
<body>
<table width="100%" border="1" rules="cols" style="border : none;">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2" style="border : solid thin;">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>
</body>
</html>
If you mean the border-bottom of main table then just set it's border-bottom:none; as below,
<table width="100%" border="1" rules="cols" style="border-collapse : collapse;border-bottom:none">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2" style="border-bottom:solid thin">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>
Related
I want to skip some coulmns in table ?
This is my table
I want the last row start from below the cost like in the below picture.
Anyone Please Help me? Thanks in advance..!
as per your question you need table like below, please comment if any query.
.hidetd
{
visibility: hidden;
}
.withborder
{
border: 1px solid #000000;
}
<table style="border-collapse: collapse;" cellpadding="10">
<tr>
<td class="withborder">Assmbl</td>
<td class="hidetd"></td>
<td class="hidetd"></td>
</tr>
<tr>
<td class="withborder">name</td>
<td class="withborder">cost per </td>
<td class="withborder">unit</td>
</tr>
<tr>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder">pc rnd</td>
<td class="withborder">Cost</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
<tr>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder">pc rnd</td>
<td class="withborder">Cost</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
<tr>
<td class="withborder"></td>
<td class="withborder"> </td>
<td class="withborder">pc rnd</td>
<td class="withborder">Cost</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
<tr>
<td class="withborder"></td>
<td class="withborder"> </td>
<td class="withborder">pc rnd</td>
<td class="withborder">Cost</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
<tr>
<td class="withborder"></td>
<td class="withborder"> </td>
<td class="withborder">pc rnd</td>
<td class="withborder">Cost</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
<tr>
<td class="hidetd"></td>
<td class="hidetd"></td>
<td class="hidetd"></td>
<td class="withborder">Total</td>
<td class="withborder"></td>
<td class="withborder"></td>
<td class="withborder"></td>
</tr>
</table>
What do you think should I do to make my code's output like in the photo?
Thank you for answering.
(I am typing any words in here because stackoverflow doesnt let me post this. This is the most detailed thing I can think of. I am new to the programming world and I have no one to assist me that's why I am asking for some help. Thank you for understanding.)
Here's my code:
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0">
</td>
</tr>
</table>
enter image description here
make table inside td
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
am trying to create a table layout like this:
<img src='data:image/png;base64,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'/>
So far I achive this:
<table class="table">
<tr>
<th colspan="2" scope="colgroup">INCOME</th>
<th colspan="2" scope="colgroup">EXPENSE</th>
</tr>
<tr>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>
Can anybody try to help me with this?
Try this one
<table class="table" width="100%" border="1" style="border-collapse: collapse;">
<tr>
<th width="50%" colspan="2">INCOME</th>
<th width="50%" colspan="2">EXPENSE</th>
</tr>
<tr>
<td width="25%">Name A</td>
<td width="25%"><center>10,000</center></td>
<td width="25%">Name A</td>
<td width="25%"><center>5,000</center></td>
</tr>
<tr>
<td width="25%">Name B</td>
<td width="25%"><center>10,000</center></td>
<td width="25%">Name B</td>
<td width="25%"><center>5,000</center></td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"><center><b>Total</b></center></td>
<td width="25%"><center>20,000</center></td>
<td width="25%"><center><b>Total</b></center></td>
<td width="25%"><center>10,000</center></td>
</tr>
<tr>
<th width="50%" colspan="2">money start</th>
<th width="50%" colspan="2">1,000.00</th>
</tr>
<tr>
<th width="50%" colspan="2">daily money</th>
<th width="50%" colspan="2">10,00</th>
</tr>
<tr>
<th width="50%" colspan="2">overall</th>
<th width="50%" colspan="2">1.010,00</th>
</tr>
</table>
Could this html markup help you?
<table class="table" border=2>
<tr>
<th colspan="2" scope="colgroup">INCOME</th>
<th colspan="2" scope="colgroup">EXPENSE</th>
</tr>
<tr>
<td>Name A</td>
<td>10,00</td>
<td>name b</td>
<td>10,00</td>
</tr>
<tr>
<td>Name A</td>
<td>5,00</td>
<td>Name B</td>
<td>5,00</td>
</tr>
<tr>
<td>TOTAL:</td>
<td>20,00</td>
<td>TOTAL:</td>
<td>10,00</td>
</tr>
<tr>
<td colspan="2">Money start</td>
<td colspan="2">1.000,00</td>
</tr>
<tr>
<td colspan="2">Daily money</td>
<td colspan="2">10,00</td>
</tr>
<tr>
<td colspan="2">Overall</td>
<td colspan="2">1.010,00</td>
</tr>
</table>
It seems easy but can't write the HTML code of the above table.
Here is what I tried so far:
<table border="1" style="border-collapse:collapse;" width="25%">
<tr>
<td>col1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Sure you want html??
<table align="center" width="590" height="590" >
<tr>
<td align="center" height="80" colspan="4">central text</td>
</tr>
<tr>
<td align="center" height="80" colspan="2">col</td>
<td align="center" colspan="2">col</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
<td align="center" height="80" rowspan="2">t</td>
<td align="center" rowspan="2">t</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
</tr>
<tr>
<td align="center" height="30">t</td>
<td align="center" >t</td>
<td align="center" >t</td>
<td align="center" >t</td>
</tr>
</table>
Like this?
colspan and rowspan was missing from your code.
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan=4 align="center">central text</td>
</tr>
<tr>
<td colspan=2 align="center">col(1)</td>
<td colspan=2 align="center">col(2)</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td rowspan=2 align="center">text</td>
<td rowspan=2 align="center">text</td>
</tr>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
</table>
I am trying to create a table that looks like this using classic HTML table constructs:
Thinking left to right I came up with the following HTML which was a disaster. Am I missing something?
<html>
<body>
<table border = 1 width=640 height=480>
<tr>
<td rowspan=2 colspan=2>1</td>
<td rowspan=4 colspan=4>2</td>
<td rowspan=2 colspan=2>3</td>
<tr>
<td rowspan=2 colspan=2>4</td>
<td rowspan=2 colspan=2>5</td>
</tr>
<tr>
<td rowspan=4 colspan=4>6</td>
<td rowspan=2 colspan=2>7</td>
<td rowspan=1 colspan=1>8</td>
<td rowspan=1 colspan=1>9</td>
</tr>
<tr>
<td rowspan=1 colspan=1>10</td>
<td rowspan=1 colspan=1>11</td>
</tr>
<tr>
<td rowspan=2 colspan=2>12</td>
<td rowspan=2 colspan=2>13</td>
</tr>
</table>
</body>
</html>
One table styled with CSS.
HTML
<table>
<tr>
<td class="green"></td>
<td colspan="2" rowspan="2" class="red"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td class="green"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="red"></td>
<td rowspan="2" class="green"></td>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="green"></td>
<td colspan="2" class="green"></td>
</tr>
</table>
CSS
table {
table-layout: fixed;
border-collapse: collapse;
max-width: 8em;
width: 100%;
}
td {
border: 1px solid white;
}
.green {
background: rgb(155,187,89);
height: 2em;
width: 2em;
}
.red {
background: rgb(192,80,77);
height: 4em;
width: 4em;
}
.blue {
background: rgb(79,129,189);
height: 1em;
width: 1em;
}
Result
Here is the code for you. I hope this becomes useful to you because I spent an hour trying to create this for you. (notice HTML 5 recommends using CSS but since you wanted this in just classic html here is the solution for you)
<table width="800" height="400">
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
</table>
<table width="800" height="400">
<tr width="50%">
<td width="50%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="25%" bgcolor="#6CBB3C"></td>
<td width="25%" bgcolor="#6CBB3C" height="200pix" bgcolor="white">
<table width="100%" height="200pix" bordercolor="white"
bgcolor="white">
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
</table>
</td>
</tr>
<tr width="50%">
<td bgcolor="#6CBB3C"></td>
<td bgcolor="#6CBB3C"></td>
</tr>
</table>
here is the result for you: