I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.
This is the desired output
This is the code I am using.
<!doctype html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="3"> </th>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th rowspan="2"> </th>
</tr>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td rowspan="6"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Done Heights may not be set but it works properly
table,
td {
border: 1px solid black;
}
td {
height: 50px;
}
<table style="width:100%">
<tr>
<td>5</td>
<td colspan="3">
<table style="width:100%">
<tr>
<td>
<table style="width:100%;margin-top:50px;">
<tr>
<td>6</td>
</tr>
</table>
</td>
<td>7</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<table style="width:100%">
<tr>
<td>11</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>12</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td class="not">
<table style="width:100%">
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
</table>
</td>
<td colspan="2">
<table style="width:100%">
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>18</td>
<td>16</td>
<td>20</td>
<td>21</td>
</tr>
</table>
Related
So i'm working on Crud java webbapp and i want to the desgin the table head so it will looks like this....
But i cannot make it through the html format.....
here is my try
Here is the Html Code
<div class="col-md-9">
<h3>Student Information From Database</h3>
<table class="table">
<thead class="bg-light">
<tr>
<th scope="col">ID</th>
<th scope="col">Full Name</th>
<th scope="col">Status</th>
<th colspan="2">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
do you want something like this;
<table border="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>FullName</td>
<td>Status</td>
<td>physics</td>
<td>calculus</td>
<td>biologi</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is an example:
<table>
<thead>
<tr>
<th>ID</th>
<th>FULL NAME</th>
<th>STATUS</th>
<th colspan="3">
MAJOR 1
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</th>
</tr>
</thead>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
.brdst{
text-align: center;
border-right:1px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3" class="brdst"></td>
<td colspan="3" class="brdst">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>Full Name</td>
<td>Status</td>
<td>Physics</td>
<td>Clculus</td>
<td>Bioloy1</td>
</tr>
<tr>
<td>Add col here</td>
strong text <td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
</tr>
</table>
</body>
</html>
You can do this with colspan & rowspan attributes.
Demo: https://jsfiddle.net/ycnar3gv/
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th rowspan="2">Full Name</th>
<th rowspan="2">Status</th>
<th colspan="3">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col3</th>
<th>col3</th>
</tr>
</tr>
</thead>
</table>
I am trying to create table in html. I have following design to create. I had added tr inside the td but somehow the table is not created as per the design.enter image description here
Can anyone suggest me how can i achieve this.
I am unable to create rounded area in the image
AidanS i tired as u suggested but i am getting like this
enter image description here
here is my html code
<table>
<tr>
<th></th>
<th>Action Plan</th>
<th>Condition</th>
</tr>
<tr>
</tr>
<tr>
<td>01.</td>
<td>Advance payment</td>
<td>$100</td>
</tr>
<tr>
<td>02.</td>
<td>Bidding </td>
<td>$80</td>
</tr>
<tr>
<td>03.</td>
<td>Sending price & details of the vehicle </td>
<td>$80</td>
</tr>
<tr>
<td>04.</td>
<td>Receiving customer confirmation </td>
<td>$80</td>
</tr>
<tr>
<td>05.</td>
<td>Sending invoice & detail sheet for LC </td>
<td>$80</td>
</tr>
<tr>
<td>06.</td>
<td>Opening LC with the bank by customer </td>
<td>$80</td>
</tr>
<tr>
<td>07.</td>
<td>Receiving the copy of LC </td>
<td>$80</td>
</tr>
<tr>
<td>08.</td>
<td>Sending the shipping details </td>
<td>$80</td>
</tr>
<tr>
<td>09.</td>
<td>Sending current details & refunding the Advance payment </td>
<td>$80</td>
</tr>
<tr>
<td>10.</td>
<td>Receiving the balance money from customer </td>
<td>$80</td>
</tr>
<tr>
<td>11.</td>
<td>Sending “Gramaniladari documents " </td>
<td>$80</td>
</tr>
<tr>
<td>12.</td>
<td>Clearing vehicle documents from the bank by customer. </td>
<td>$80</td>
</tr>
<tr>
<td>13.</td>
<td><table><tr>
<td>name1</td>
<td>price1</td>
</tr>
<tr>
<td>name1</td>
<td>price1</td>
</tr>
</table> </td>
<td>$80</td>
</tr>
<tr>
</table>
Try This
<table width="100%" border="1">
<tr>
<td colspan="3"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td width="12%">1</td>
<td width="38%"> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
</table>
I think this is what you want
<table>
<tr>
<td><table><tr><td>Text here</td></tr></table></td>
</tr>
</table>
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
I have a problem with writing a proper code for my table. Using the table feature in Dreamweaver it does help but when it comes on styling a single column or a row with CSS I see that my code is not properly written. For example if I want to style the first column I have to add class to each tr element. So I need your advice on how my table could be written in a more tidier way.
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe3">title</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr class="qwe1">
<td>1</td>
</tr>
<tr class="qwe1">
<td>2</td>
</tr>
<tr class="qwe1">
<td>3</td>
</tr>
<tr class="qwe1">
<td>4</td>
</tr>
<tr class="qwe1">
<td>5</td>
</tr>
<tr class="qwe1">
<td>6</td>
</tr>
<tr class="qwe1">
<td>7</td>
</tr>
<tr class="qwe1">
<td>8</td>
</tr>
<tr class="qwe1">
<td>9</td>
</tr>
<tr class="qwe1">
<td>10</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
You can see my code live here: http://codepen.io/mariomez/pen/XJqwYy
Ps: I don't want you to write the whole code or something just some tips on what things I should change in my code. :)
First of all, I'd say write just a single table instead of the tables per column you have right now. You can still keep the big title with red background using <td colspan="8">title</td> for that cell.
Once you have this single cleaned table you can use :first-child to select only the first tds inside a row, excepy maybe the main header. Then unleash your CSS magic.
I included a snippet doing just that here.
EDIT: Improved snippet here.
You don't need nested tables! Use colspan and rowspan to achieve desired output.
This is a great starting point to learn table element: complete guide table element.
This is a quick edit of your code: codepen.
Notice how I used colspan for the first row:
<td colspan="8" class="qwe3">title</td>
See this:
_____ __
|_____| |
| |__|__|
|__|_____|
How to code it in HTML?
<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
Try this :-)
<table>
<tr>
<td colspan=2>top left</td>
<td rowspan=2>top right</td>
</tr>
<tr>
<td rowspan=2>lower left</td>
<td>center</td>
</tr>
<tr>
<td colspan=2>lower right</td>
</tr>
</table>
It produces
use colspan and rowspan, and set height and width.
<table border=1 height=400 width=400>
<tr>
<td colspan=2>1</td>
<td rowspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>8</td>
</tr>
</table>
http://jsfiddle.net/2b9K3/
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
This can be done pretty easily with rowspans and colspans.