I have a table like below (on the left) - how to make it to be like the one on the right ?
<table>
<thead>
<tr>
<td colspan='3' rowspan='2'>Lorem</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
Like this:
<table>
<thead>
<tr>
<td colspan='3'>Lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Here your code!!
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/all.css"/>
<title>STACKOVERFLOW</title>
</head>
<body>
<table>
<tr>
<td colspan="3">Lorem</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
CSS
table {border-collapse: collapse}
table td {
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<td colspan='3'>Lorem</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
Related
Table Prtscn
I need to create such a table in HTML Without the use of CSS
I have been trying for several hours to create this table, but without success, Would appreciate help :)
I enclose the code I was working on.
I am attaching a picture
<!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>
</head>
<body>
<table border="1"width="400">
<tr>
<td>Hello world</td>
<table border="1"width="400">
<td>
<table border="2" cellpadding="1"celspaceing="2">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</td>
</tr>
</table>
<td>Cell B</td>
<td>Cell C</td>
</table>
<tr>
<table border="1"width="400">
<td>Hi There</td>
</tr>
</table>
</body>
</html>
How is this?
<table border="1" width="350px" cellpadding="5px">
<tr>
<td>text</td>
</tr>
<tr>
<td><table>
<tr>
<td>
<font size="5">
<table border ="2" >
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</font>
</td>
<td><table cellspacing="20px"><tr><td></td></tr></table></td>
<td><table cellspacing="20px"><tr><td></td></tr></table></td>
<td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
<td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
text
</td>
</tr>
</table>
The effect can be achieved by nesting a table:
tr{
border:1px solid;
}
table{
border-collapse:collapse;
}
#nested td{
border:1px solid;
}
<table>
<tr><td colspan="3">text</td></tr>
<tr>
<td>
<table id="nested">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</td>
<td>text</td>
<td>text</td>
</tr>
<tr><td colspan="3">text</td></tr>
</table>
With inline styles only (as per OP request):
<table style="border-collapse: collapse;">
<tbody><tr style="border: 1px solid;"><td colspan="3">text</td></tr>
<tr style="border: 1px solid;">
<td>
<table id="nested" style="border-collapse: collapse;">
<tbody><tr style="border: 1px solid;">
<td style="border: 1px solid;">a</td>
<td style="border: 1px solid;">b</td>
<td style="border: 1px solid;">c</td>
</tr>
<tr style="border: 1px solid;">
<td style="border: 1px solid;">d</td>
<td style="border: 1px solid;">e</td>
<td style="border: 1px solid;">f</td>
</tr>
</tbody></table>
</td>
<td>text</td>
<td>text</td>
</tr>
<tr style="border: 1px solid;"><td colspan="3">text</td></tr>
</tbody></table>
So i try to duplicate an html table in the link picture below,but i dont know how to set the widht of a table data. In that picture there's a table data with the value of '1' under 'Pertemuan', and i want to set the size of '1' the same size as the other 2,3,4,5,Just like in the picture.
(https://i.stack.imgur.com/g0r6r.png)
Below is my HTML code trying to duplicate the table in the picture
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Table Danial Syah XI RPL 2</title>
</head>
<body>
<table border="1">
<tr>
<td style="background-color:crimson" rowspan="2">No</td>
<td style="background-color:deepskyblue" rowspan="2">Nama</td>
<td style="background-color:chartreuse;">Pertemuan</td>
</tr>
<tr>
<td style="background-color:darkcyan;">1</td>
<td style="background-color:darkcyan">2</td>
<td style="background-color:darkcyan">3</td>
<td style="background-color:darkcyan">4</td>
<td style="background-color:darkcyan">5</td>
</tr>
<tr>
<td>1</td>
<td>Neymar</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
You can use colspan for td.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Table Danial Syah XI RPL 2</title>
</head>
<body>
<table border="1">
<tr>
<td style="background-color:crimson" rowspan="2">No</td>
<td style="background-color:deepskyblue" rowspan="2">Nama</td>
<td colspan="5" style="background-color:chartreuse;">Pertemuan</td>
</tr>
<tr>
<td style="background-color:darkcyan;">1</td>
<td style="background-color:darkcyan">2</td>
<td style="background-color:darkcyan">3</td>
<td style="background-color:darkcyan">4</td>
<td style="background-color:darkcyan">5</td>
</tr>
<tr>
<td>1</td>
<td>Neymar</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
You can use colspan attribute on td to take column by giving columns as a number. Below is the working code as you expected it to be.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Table Danial Syah XI RPL 2</title>
</head>
<body>
<table border="1">
<tr>
<td style="background-color:crimson" rowspan="2">No</td>
<td style="background-color:deepskyblue" rowspan="2">Nama</td>
<td style="background-color:chartreuse;" colspan="5">Pertemuan</td>
</tr>
<tr>
<td style="background-color:darkcyan;">1</td>
<td style="background-color:darkcyan">2</td>
<td style="background-color:darkcyan">3</td>
<td style="background-color:darkcyan">4</td>
<td style="background-color:darkcyan">5</td>
</tr>
<tr>
<td>1</td>
<td>Neymar</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
I made a table inside a div to make it scrollable;
<div style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
This table is scrollable from top to bottom. How can I make the table's overflow start at the bottom and make it scroll upwards?
You need to use javascript for this. Using scrollTop for accessing the scroll offset from the top (default is 0). So you have to get the div's height and set the scrollTop of the div to its height. To get the height, I used getBoundingClientRect().height
let tableDiv = document.getElementById('main');
tableDiv.scrollTop = tableDiv.getBoundingClientRect().height;
<div id="main" style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your HTML content:
<div class="scorllable-table" id="scrollTable">
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your CSS content:
.scorllable-table {
overflow-y: scroll;
height: 100px;
width: 100px;
}
If you want to do this using JavaScript only, then please try with this.
var scrollableDiv = document.getElementById("scrollTable");
scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
If you want to do this using jQuery, then use the below code.
$("#scrollTable").scrollTop($("#scrollTable")[0].scrollHeight);
If you want to smooth scroll, then try with this.
$('#scrollTable').stop().animate({
scrollTop: $('#scrollTable')[0].scrollHeight
}, 500);
Enjoy, Thanks. :)
I have several php generated tables like below, and I tried to add a table line on the 3rd and 4th row but I failed.
What I tried is this:
table.tbc td:nth-child(3) {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I do this? I know this is an unusual table structure.
If I understand you correctly, you want to add a border between the 3rd and 4th trs. If so, the right selector is table.tbc tr:nth-child(3) td
table.tbc tr:nth-child(3) td {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
Im trying to merge cells 1+2+3
I have already done so with the current code
<td rowspan="2" colspan="2"> 1</td>
Ive then left the 2nd row blank to allow for this.
<tr> </tr>
Somehow this fails and it also removes a row as there should be 7 in total.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<table width="100%" border="1">
<tbody>
<tr>
<td rowspan="4" colspan="2"> </td>
<td rowspan="2" colspan="2"> 1</td>
</tr>
<tr> </tr>
<tr>
<td> 2</td>
<td> 3</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Name</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Age</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Cost</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>
Here's a thing with rowspan, if you look at this code, it has the same structure as yours, only I merged 1,2,3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table width="100%">
<tr>
<td rowspan="3">
big
</td>
<td colspan="2" rowspan="2" >
1
</td>
</tr>
<tr>
</tr>
<tr>
<td>
3
</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</body>
</html>
Once I did the rowspan, 1,2,3 merged into what looks like a single row, although in reality it's two rows.
This is another example. I do the rowspan exactly as I did in the first example, I simply added another column to the right (x).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table width="100%">
<tr>
<td rowspan="3">
big
</td>
<td colspan="2" rowspan="2">
1
</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr>
<td>
3
</td>
<td>4</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
</table>
</body>
</html>
Now the table looks exactly as you would expect it, but only because the "x" column holds it together. Without the "x" column, the table loses the desired look although it is exactly what you want it to look like. if you for example add Height="50px" in the first example to your 2nd <td>
<td colspan="2" rowspan="2" Height="50px">
1
</td>
This will make your table look exactly as you expect it.
Or you could add another column like I did in the 2nd example and simply hide it.