I've referred to this question: HTML — Two Tables Horizontally Side by Side
In SQL I have tried the following:
1.
DECLARE #HTML NVARCHAR(2000);
SET #HTML =
N'
<table border=1 style=''display: inline-block''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''display: inline-block''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
'
EXEC msdb..sp_send_dbmail
#recipients = 'me#blahblah.co.uk',
#subject = 'foo',
#body_format = 'html',
#body = #HTML
2.
DECLARE #HTML NVARCHAR(2000);
SET #HTML =
N'
<table border=1 style=''float: left''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''float: left''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
'
EXEC msdb..sp_send_dbmail
#recipients = 'me#blahblah.co.uk',
#subject = 'foo',
#body_format = 'html',
#body = #HTML
Neither 1 or 2 aligns the tables side-by-side in the email. What am I doing wrong?
As per my understanding, you are missing the HTML tag try the below one.
Add second table float property to right and both table display property to inline-table.
DECLARE #HTML NVARCHAR(2000);
SET #HTML = N'<html> <body> <table border=1 style=''float: left; display: inline-table;''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''float: right; display: inline-table;''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</body>
</html>'
Related
I know it has been already asked about how to create two tables in HTML side by side.
But those answers doesn't solve my problem.
I am already aware we can use:
display: inline-block or
float: left
But in my case number of cell in table is too much that second table moves below first table.
My fiddle
http://jsfiddle.net/vyzmgews/1/
<table border=1 style="display: inline-block">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1 style="display: inline-block">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
How can i keep both the table side by side with the scroll bar.
You could wrapp both tables in a div and define for it display: flex.
Working example:
.table-wrapper {
display: flex;
}
<div class="table-wrapper">
<table border=1>
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</div>
You could simply wrap them in another (borderless) table:
<table>
<tr>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
</td>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</td>
</tr>
</table>
Can you try with this code? Im not sure is this what you are expect.
<div class="row">
<table border=1 class="inlineTable">
<tr>
<th>Cell1 topic</th>
<th>Cell1 topic</th>
<th>Cell1 topic</th>
</tr>
<tr>
<td>Cell1 content</td>
<td>Cell1 content</td>
<td>Cell1 content</td>
</tr>
</table>
<table border=1 class="inlineTable">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
or you can add 2 column grid for that.
Quite simple really. I've probably missed something obvious but here goes.
I have a <table> inside a multi-column view. The idea being, it's a fairly tall table so having it on multiple columns makes it less obnoxiously vertical and fits better on-screen.
The problem is that the rows in columns 2 and beyond have no header.
If I go to Print Preview, however, each column has a "copy" of the <thead> - as it should, IMO, since that's what the <thead> is for.
Is it possible to get this behaviour, apparently only available by default in #media print, to work on the webpage itself?
(Note that the table's contents are dynamic and the whole thing should be responsive, so manually inserting / breaking up the table is a no-go.)
#container {
column-count: 3;
}
<div id="container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>
I have a 100% height layout split to three parts: header, content, footer.
I'd like to display a table inside a the content section with 100% height and i want the table body to have a vertical scroll bar for the table body content.
How can i do that?
it seems like i cannot set the tbody height to 100% and have a scrollbar?
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
table {
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:400px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
Your layout is a bit messed up. Too many containing div in my opinion. Did some changes using flex - so the table container will have
display: flex;
flex-direction: column;
overflow: auto;
and the table will have flex-grow: 1;
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container>div {
width: 100%;
display: flex;
flex-direction: column;
}
#container>div>div {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: auto;
}
#header {
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#header>div {
height: 50px;
border: solid 2px #aaa;
}
#content {
flex-grow: 1;
}
#content>div {
height: 100%;
background: #f0f4f0;
border: solid 2px #5a5;
display: flex;
flex-direction: column;
}
#footer{
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#footer>div {
height: 50px;
border: solid 2px #a55;
}
table {
flex-grow: 1;
table-layout: fixed;
margin: auto;
}
th,
td {
padding: 5px 10px;
border: 1px solid #000;
}
thead,
tfoot {
background: #f9f9f9;
display: table;
width: 100%;
width: calc(100% - 18px);
}
tbody {
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
I had to use javascript for this but maybe someone can come up with a pure CSS solution.
Main sections of the page
I'm using flexbox to position the header, main and footer sections of the page allowing the main to take up as much vertical space that it can:
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
The Table
I set the table to take up 100% of the height and width in the main section and set each tr element to display flex allowing all their direct child elements to take up equal amounts of space:
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr > * {
flex: 1;
}
I've set the tbody element to display: block which will allow for content to be scrollable if it overflows:
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 40vh; // for demonstrating the scrolling of the tbody
}
I then used some javascript to set the height of the tbody element, please find the documentation in the comments below:
setTbodyHeight();
window.addEventListener("resize", setTbodyHeight);
function setTbodyHeight() {
// get the viewport height
let viewportHeight = window.innerHeight;
// calculate how much of the height the main should consume
let headerHeight = getHeight("header");
let footerHeight = getHeight("footer");
let mainHeight = viewportHeight - (headerHeight + footerHeight);
// from the main height calcuate how much space would be available if you subtracted the tfoot/thead height
let theadHeight = getHeight("thead");
let tfootHeight = getHeight("tfoot");
let tbodyHeight = mainHeight - (theadHeight + tfootHeight);
// set the height of the tbody to this value
let tbody = document.querySelector("tbody");
tbody.style.height = tbodyHeight + "px";
function getHeight(elementName) {
let element = document.querySelector(elementName);
let elementCSS = window.getComputedStyle(element);
let height = parseInt(elementCSS.getPropertyValue("height"));
return height;
}
}
/* IGNORE RULES FROM HERE.....*/
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
}
header::after,
footer::after {
content: "." attr(class);
}
tbody tr:nth-child(even) {
background: firebrick;
color: white
}
td {
text-align: center;
}
/*.....TO HERE*/
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr>* {
flex: 1;
}
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 20vh;
}
tbody td {
line-height: 20vh;
}
<header class="header"></header>
<main class="main">
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
</main>
<footer class="footer"></footer>
How can I make a table in a div (that takes the remaining screen height) scrollable without scrolling the whole page?
I know how to make it scrollable inside the div by wrapping it like this
<div style="overflow: auto; height: 300px;">
<table>...</table>
</div>
but how can I make the div's height use all of the remaining screen height?
EDIT: here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-12">
<div class="panel panel-default">
<!-- Header -->
<div class="panel-heading">Panel Heading<button class="pull-right" onclick="myFunction();">
<span class="glyphicon glyphicon-filter"></span>
</button>
</div>
<div class="panel-body row" id="filter" style="display: none; padding-top: 0;">
<div class="col-md-6">
<div class="col-sm-6 column" style="height: auto; margin-top: 1em">
<!-- filter selector -->
</div>
</div>
</div>
<!-- Table -->
<div class="panel-body" style="overflow: auto; height: 300px;">
<table class="table">
...
</table>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById('filter');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
Use vh instead % : [100vh] vertical height
i set width 90%, you can change it.
table is always center because div.parent is margin: 0 auto
.parent {
background-color: #ccc;
width: 90%;
height: 100vh;
overflow: auto;
margin: 0 auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="parent">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
use viewport percentages but it will not affect old ie.
height: 100vh;
with the overview, you can do the following
<div style="
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: n%;
border-left: 1px solid #000;
">
<table>...</table>
</div>
I'm leaving it on the right and I use the border-left so you can see that you need a reasonable width
EDIT: for edit html
you set parent tag position property with relative.
You using position: absolute; for div tag
The line break appears above the the table, not were I would normally expect it to be. I'm just wondering why this is.
<table>
<tr>
<th>cell group 1</th><!--<br> this wouldnt work-->
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<th>cell group 2</th>
<td>cell 5</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<th>cell group 3</th>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
<td>cell 11</td>
</tr>
</table>
You cannot put a <br> tag inside a table structure. But you can do it inside cell elements: <th> or <td>.
Example:
<table>
<tr>
<th>cell group 1<br></th>
<td>cell 1</td>
<td>cell 2<br></td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<th>cell group 2</th>
<td>cell 5</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<th>cell group 3</th>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
<td>cell 11</td>
</tr>
</table>
The visual content of a table can only exist inside table data cell tags (td or th) - putting elements in between these makes no logical sense - where would it appear?
If you have some tabular data and want to put something between two data cells, then it just becomes another data cell, doesn't it.
If you want to adjust the visual appearance of some part of a table, it should be done with CSS margin or padding styles, not by adding line breaks (this applies in general - br should not be used to adjust the size of elements.)