textbox below table column - html

Is it possible to add a text-box inside a 6 columned table?
It would look something like this
<table id="table" class="table">
<thead id="search-result">
<tr>
<th>table 1</th>
<th>table 2</th>
<th>table 3</th>
<th>table 4</th>
<th>table 5</th>
<th>table 6</th>
</tr>
</thead>
<tbody id="result">
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
<td>content 5</td>
<td>content 6</td>
</tr>
</tbody>
</table>
under the content tags there would be a 100% textbox. is that possible?


This question has been answered. thanks to Mr. Alvaro Montoro.
I've just added a new row with colspan="6" and the textbox inside it.

Related

In a table with multiple thead how to make repeat last thead on a page break

I have a HTML question:
If I have a table with multiple thead, on printing this page, the repetition on top of next page is first thead and not the last one.
Example:
<table>
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
<thead>
<tr>
<th>TH 3</th>
<th>TH 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
The second-page header shows TH1 and TH2 instead of TH3 and TH4 during print preview.
Is there a way to print TH3 and TH4?

Move Thead section as first column

Consider the following html
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
</tbody>
It renders as the following image:
Is it possible by only using css to have the previous html render like the following image? (please note the indexes)

If you have to do this with css and you can't change your HTML you can do it with Flexbox.
table {
display: flex;
}
thead tr, tbody tr {
display: inline-flex;
flex-direction: column;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
</tbody>

how to vertically align two tables with horizontal scroll at bottom

I would like to know how to vertically align two tables with horizontal scroll at bottom.
The following is the HTML code:
<div class="cntnr">
<div class="tabtwocntnr">
<table class="tabtwo">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
</tr>
</thead>
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
</tr>
</tbody>
</table>
</div>
</div>
The corresponding css is:
.tabtwo,.tabthree{
border-collapse: collapse;
table-layout:fixed;
}
.tabtwo th, .tabthree td{
border-right: 1px solid black;
}
.tabthree td{
text-align: center;
border-top: 1px solid #000;
}
.tabtwocntnr,.tabthreecntnr{
width:100%;
}
.cntnr{
overflow-x:auto;
width: 100%;
border: 1px solid black;
}
The fiddle is :
http://jsfiddle.net/8H5Ek/
As we can see in this fiddle the two tables are not aligned properly(with respect to each other).There is also some white space at the right corner of the bottom table. I have tried resolving it by applying table-layout: fixed; to both the tables.
I am unable to achieve the desired result.
Please help me by contributing.

Without giving explicit widths, controlling tables can be very tricky.
See this fiddle: http://jsfiddle.net/8H5Ek/3/
Add these styles to your css:
table { width: 100%; }
th, td { width: 84px; }
You have to estimate the width of the td carefully.
Edit:
Here is another fiddle: http://jsfiddle.net/8H5Ek/12/
You can control the content length by using ellipsis. Moreover, you do not need those two inner divs (tabtwocntnr and tabthreecntnr). You can rid of them.
th, td {
width: 84px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
try changing width:100% to width:auto on the table css and then see how the content re-sizes the first header cell

for .tabtwo,.tabthree you have to set width:100%; and set the width for parent...add
html, body {
width:100%;/* added */
height:100%;/* added */
margin:0;/* added */
padding:0;/* added */
}
then you have to use colspan to fix the width of th
demo
EDIT
okay...solution was there in front of eyes...bit of your bad markup played foul....
thead and tbody is used for marking things in single table...you have used 2 different tables for it, that's why alignment issue is there..
delete this and you are done:
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
final demo

HTML Table vertically rather than horizontally?

I've got this table, and in this table are 4 columns, like this:
Column1|Column2|Column3|Column4|
data 1 data 2 data 3 data 4
But how do I get it like this?
Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4
This is my code:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</table>
Any ideas? Is it even possible?

Like this:
<table>
<tr>
<th>Column1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column4</th>
<td>Data 4</td>
</tr>
</table>

You put the th in the table rows
<table>
<tbody>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
</tbody>
</table>

<table>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column 3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column 4</th>
<td>Data 4</td>
</tr>
</table>

Maybe scope attribute can help you?
<table>
<tr scope="row">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
Also here, you get another solution by CSS.

you can use below pattern But i'll suggest you to use css tables : Page layout, Divs instead of Tables
<table>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
</table>

How to create an html table with captions for column and row sections

I'm trying to make an html table similar to this:
I'm not interested in the data for the table but just the barebones: Likelihood, Consequence, column names (minor, moderate, etc) and rows (almost certain, likely, etc).
This is what I have so far: http://jsfiddle.net/PQHR6/
I can't figure out how to make those Likelihood and Consequence headers

You need to use th with the attribute colspan.
<tr>
<th>Table header</th>
<th colspan="5">Table header</th>
</tr>
<tr>
<th> <!-- EMPTY --></th>
<th>Minor</th>
<th>Lorem 1</th>
<th>Lorem 2</th>
<th>Lorem 3</th>
<th>Lorem 4</th>
</tr>
<tr>
<th>Almost Certain</th>
<td>Table cell 1</td>
<td>Table cell 2</td>
<td>Table cell 3</td>
<td>Table cell 4</td>
<td>Table cell 5</td>
</tr>
jsfiddle: http://jsfiddle.net/nPQfz/

Use table headings th and add colspan attribute to second heading to span 5 columns:
<tr>
<th>Likelyhood</th>
<th colspan="5">Consequence</th>
</tr>
Updated jsfiddle