Custom table in HTML5 - html

I need a table like in the picture . I've tried it but I can't do exactly what I want. Here is the code I've wrotten:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l" rowspan="2"></th>
<th class="tg-yw4l"></th>
<th class="tg-yw4l"></th>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>


You would need to use a nested table to achieve your layout - if you insist on using tables
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
.tg {
height: 400px;
}
.tg table {
height: 100%;
}
<table class="tg">
<tr>
<th class="tg-yw4l no-pad" rowspan="3">
<table>
<tr>
<td>td</td>
</tr>
<tr>
<td>td</td>
</tr>
</table>
</th>
<th class="tg-yw4l">th</th>
<th class="tg-yw4l">th</th>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
</table>

Related

How can I give more than one value to a single cell with a static word in the middle

I'm creating a editable html table, and I would like to know how can I give more than one value to a single cell with a static word in the middle, example:
I have this already:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr>
<th>Days</th>
<th>Work Schedule</th>
<th>Rest and Meal Interval</th>
</tr>
<tr>
<td>Monday</td>
<td contenteditable='true'>This is editable</td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Tuesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Wednesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Thursday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Friday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Saturday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Sunday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</table>
And I would like to have this:
So the word às will always be in the middle of those cells, and I need a space before and after it to write some values.

If you want something in the same column, you'll need to change the td to contain two inputs and the text between, something like this:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
border: 1px solid #dddddd;
text-align: left;
box-sizing: border-box;
width: 40%;
height: 100%
}
span {
width: 10%;
margin-left: 5%;
margin-right: 5%;
}
<table>
<tr>
<th>Days</th>
<th>Work Schedule</th>
<th>Rest and Meal Interval</th>
</tr>
<tr>
<td>Monday</td>
<td><input type="text"/><span>às</span><input type="text"/></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Tuesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Wednesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Thursday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Friday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Saturday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Sunday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</table>
Obviously some additional CSS will be needed to make it look pretty.

HTML table using rowspan and colspan

I'm trying to create a HTML table like in this image;
I tried the following but it did not work.
<table border="1">
<tr>
<th rowspan="2" colspan="2">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>

You can try this:
table {
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid;
}
<table>
<col width=100><col width=100><col width=100>
<tr>
<td colspan="2" style="border-bottom: none;">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="2" style="border-top: none;"></td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>

hi your code is good just add with to see the difference
<table border="1">
<tr>
<th rowspan="2" colspan="2" style="width: 95px;">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td style="width: 20px;">1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>

This is how you could build the table in your picture by using rowspan and colspan:
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
width: 33%;
}
<table>
<tr>
<td colspan="2" rowspan="2">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>

Table Header HTML

I'm trying to create this table header in HTML. But I cant use the properly col-span limits.
Any help?
** I was able to get the solution, looks like its what I was looking for.
This website http://html.com/tables/rowspan-colspan/ helped.
My solution:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-031e" rowspan="4">A</th>
<th class="tg-031e" rowspan="4">B</th>
<th class="tg-031e" rowspan="4">C</th>
<th class="tg-031e" rowspan="4">D</th>
<th class="tg-baqh" colspan="8">E</th>
</tr>
<tr>
<td class="tg-031e" rowspan="3">F</td>
<td class="tg-s6z2" colspan="7">G</td>
</tr>
<tr>
<td class="tg-s6z2" colspan="6">H</td>
<td class="tg-031e" rowspan="2">I</td>
</tr>
<tr>
<td class="tg-yw4l">J</td>
<td class="tg-yw4l">K</td>
<td class="tg-yw4l">L</td>
<td class="tg-yw4l">M</td>
<td class="tg-yw4l">N</td>
<td class="tg-yw4l">O</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
This solved my problem.
Thanks all for your help

line inside html table

I'm trying to use both padding and border-bottom in html to get this table:
But in order to make the border-bottom one line I added border-collapse: collapse; and now I don't have padding, how can I use both?
here is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>
and my css code:
table {
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin:
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}
tr.line { border-bottom: 2px solid black; }

You have errors in your HTML and your CSS. After correcting those, all that's needed is to set border-spacing: 0 instead of border-collapse: collapse. Then it seems to work well.
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
border-collapse: separate;
border-spacing:0;
padding: 20px;
}
th, td {
text-align: left;
padding: 0 10px;
}
th.center, td.center {
text-align: center;
}
tbody tr:last-child td {
border-bottom: 2px solid black;
}
<table>
<thead>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
</tbody>
<tfoot>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</table>
Note that I also took the liberty of dividing the table in a thead, a tbody and a tfoot. With such a structure, you won't need tricks like class="line" to indicate the tr that needs the line; this can now be determined automatically (it's the last tr in the tbody).

HTML tables have a different display property than divs and they behave differently.
table {
border-collapse: collapse;
}
tbody {
border-bottom: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table style="width:50%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>total</th>
<td></td>
<td>282</td>
</tr>
</tfoot>
</table>
Also on jsfiddle: https://jsfiddle.net/c6mwh2cL/
Also check out this answer: tbody border not showing
Also, avoid putting <div> inside a table. A table should only have <thead>, <tbody> and <tfoot> elements, and those should only have <tr> elements, and those should only have <th> and <td>. The semantic has it's purpose and this is how it's meant to be rendered.

Does this help?
Using table border-spacing: 0;
tr.line td {
border-top: 2px solid black;
}
works
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
padding: 20px 20px 20px 20px;
border-spacing: 0;
}
th {
text-align: left;
padding: 0 10px;
}
td, th { }
.center {
text-align: center;
}
td {
padding: 0 10px;
}
tr.line td {
border-top: 2px solid black;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr class="line">
<td></td>
<td></td>
<td>Sum C</td>
<td>Sum D</td>
</tr>
</tbody>
</table>

Need a table structure in html of table within table

Please refer the table structure needed in the pic above. Can any body guide how this can be achieved

Like this?
.tg {
border-collapse: collapse;
border-spacing: 0;
vertical-align: middle;
}
.tg td {
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg th {
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg .tg-7uzy {
background: #cfc;
}
.tg .tg-yw4l {
background: #ccf;
}
<table class="tg">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-yw4l">Col 1</th>
<th class="tg-yw4l">Col 2</th>
<th class="tg-yw4l">Col 3</th>
<th class="tg-yw4l">Col 4</th>
</tr>
<tr>
<td class="tg-7uzy" rowspan="3">Row 1</td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l" rowspan="3">Row 2</td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy">Row 3</td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l">Row 4</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>