I am new to DIV tags with CSS layout. I have the following layout in Tables and trying to replace with DIVs. We are using DIV tags in our application. So I do not want interfere with existing layout. I appreciate any input.
<table style="width:100%;" border="1">
<tr>
<td style="width: 80%; " colspan="4"></td><td rowspan="3"></td>
</tr>
<tr>
<td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%;"></td>
</tr>
<tr>
<td style="width: 40%; " colspan="2"></td><td style="width: 40%; " colspan="2"></td>
</tr>
</table>
As someone already mentioned you should probably use some framework, such as Bootstrap for example: http://getbootstrap.com/css/#grid
However here is a small fiddle example of "table" only with "DIV tags": https://jsfiddle.net/Munja/q3f21Lnk/
<div class="table">
<div class="first">
<div class="one"></div>
<div class="one">
<div class="one-fourth"></div>
<div class="one-fourth"></div>
<div class="one-fourth"></div>
<div class="one-fourth"></div>
</div>
<div class="one">
<div class="one-half"></div>
<div class="one-half"></div>
</div>
</div>
<div class="second"></div>
</div>
Related
This is what I have for two side by side columns of key-value pairs with fixed width between the key-values. The columns should get further apart on resize, but not the key value pairs themselves.
I don't really understand how the 'width: 1%' is working. Is there a better solution to this? Is there anything wrong with the way I've done this?:
http://jsfiddle.net/zdt6ejq0/3/
<table width="50%" style="float: left">
<tr>
<td style="vertical-align: top; width: 1%"><b>Inment:</b></td>
<td style="vertical-align: top">{wbsSubstructure}</td>
</tr>
<tr>
<td><b>ACDnge Oer:</b></td>
<td>{changder}</td>
</tr>
<tr>
<td><b>Coct Ne:</b></td>
<td> {cact}</td>
<tr>
<td style="vertical-align:top;"><b>Den:</b></td>
<td> {dil}</td>
</tr>
</table>
<table width="50%" class="data" style="float: right">
<tr>
<td style="vertical-align: top; width: 1%"><b>Inon De:</b></td>
<td style="vertical-align: top">{ine}</td>
</tr>
<tr>
<td><b>Sc Nr:</b></td>
<td> {spmber}</td>
</tr>
<tr>
<td><b>Cct Nr:</b></td>
<td> {cumber}</td>
</tr>
<tr>
<td style="vertical-align:top;"><b>Don:</b></td>
<td> {dil}</td>
</tr>
</table>
You could place the tables inside two divs, one floating left, one floating right.
I also recommend to use css classes, not style tags, inside html.
Like this:
http://jsfiddle.net/69x3rstc/
<div class="container">
<div class="floatLeft">
<table>
<tr >
<td><b>Inment:</b></td>
<td>{wbsSubstructure}</td>
</tr>
<tr >
<td ><b>ACDnge Oer:</b></td>
<td>{changder}</td>
</tr>
<tr >
<td ><b>Coct Ne:</b></td>
<td> {cact}</td>
<tr >
<td><b>Den:</b></td>
<td> {dil}</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="data">
<tr >
<td><b>Inon De:</b></td>
<td>{ine}</td>
</tr>
<tr >
<td ><b>Sc Nr:</b></td>
<td> {spmber}</td>
</tr>
<tr >
<td ><b>Cct Nr:</b></td>
<td> {cumber}</td>
</tr>
<tr >
<td><b>Don:</b></td>
<td> {dil}</td>
</tr>
</table>
</div>
</div>
CSS
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
There are many ways to do this, each variation depends on your stack, personal preference and or requirements. If you are not locked down to using a table. My preference is to use divs instead to achieve the same effect. This allows you to make use of modern css3 attributes and not be bound by the constraints of a table element. Yes, tables are semantically correct for tabular data, however, the responsive world puts a world of complexities that tables weren't initially designed for.
Ex:
.tabular-data {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
display: flex;
}
.column .column-inner:first-child {
flex-basis: auto;
flex-wrap: nowrap;
}
.column .column-inner:last-child {
flex-grow: 1;
padding-left: 0.5rem;
}
<div class="tabular-data">
<div class="column">
<div class="column-inner">
<div class="cell"><strong>Inment:</strong></div>
<div class="cell"><strong>ACDnge Oer:</strong></div>
<div class="cell"><strong>Coct Ne:</strong></div>
<div class="cell"><strong>Den:</strong></div>
</div>
<div class="column-inner">
<div class="cell"> {dil}</div>
<div class="cell"> {cact}</div>
<div class="cell">{wbsSubstructure}</div>
<div class="cell">{changder}</div>
</div>
</div>
<div class="column">
<div class="column-inner">
<div class="cell"><strong>Inon De:</strong></div>
<div class="cell"><strong>Sc Nr:</strong></div>
<div class="cell"><strong>Cct Nr:</strong></div>
<div class="cell"><strong>Don:</strong></div>
</div>
<div class="column-inner">
<div class="cell">{ine}</div>
<div class="cell">{spmber}</div>
<div class="cell">{cumber}</div>
<div class="cell">{dil}</div>
</div>
</div>
</div>
Actually I am trying to append the content from js to html table.And also with it I am trying to add a button below the table to the extreme right of the page.But I am not able to align it.Please guide where am I going wrong.
HTML Code is:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 20px;
}
#table {
margin-left: -900px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<div id="table" style="display:none">
<div class="container text-center">
<div class="row">
<div class="col-sm-4"></div>
<!--If I remove this line the table only will not be displayed-->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
<div id="jiratable" style="display:none">
<div class="container text-center">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table class="table table-hover">
<table id="Jira_table" class="table table-hover" cellspacing="0" style="width:240%;table-layout:fixed">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
I don't know where I am going wrong.
Expected output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **#gmail
2 TG Ram 3 1 TR-152 RS1-Release **#gmail
1 TR-153 RS2-Release **#gmail
SendMail Cancel
So I want the SendMail and cancel button to right.But the output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **#gmail
2 TG Ram 3 1 TR-152 RS1-Release **#gmail
1 TR-153 RS2-Release **#gmail
SendMail Cancel
This is a list of your problems.
You're missing alot of closing tags
Your table won't display because you have style="display:none" which mean it won't display.
info for display
In the code you have lots of missing aligns which makes the table weird.
class="btn btn-primary btn-lg pull-right" this class is already right align
To align the tables side by side, either make a parent table for the data table or **within the CSS, you can set the division positioning **(which mean more work/more code you need to have)
Im suggesting you use this code.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
/*edit this as you want*/
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 20px;
}
/* to clear the border */
.noborder {
border: none;
}
<!DOCTYPE html>
<html>
<body>
<table>
<td>
<div id="table" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div id="jiratable" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<tr>
<td class="noborder"></td>
<td class="noborder">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" onclick="sendMail()">SendMail</button>
</div>
</div>
</td>
</table>
</body>
</html>
Summary
The important thing you need to change are the closing of tags. This might effect your output.
Refer:
About closing tag
*You are not properly closed end div tags properly
*remove style hidden
*merge two tables and remove a border
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: none !important;
}
td,
th {
text-align: left;
padding: 20px;
}
<!DOCTYPE html>
<html>
<body>
<div id="table" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
<th>Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
<tr>
<td>1</td>
<td> Ag</td>
<td>1</td>
<td>Raj </td>
<td>0</td>
<td>1 </td>
<td>TR0-150</td>
<td>GMAIL </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" class="btn btn-primary btn-lg pull-right" style="color: white; background-color: blue;padding:5px" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William
.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>
Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps
Here I have created one page. Trying to learn responsive page design too.
EXAMPLE FIDDLE
Above second table, there is one line 'Twitter timline'.
In the same line above the 2nd table I have created button export to csv. How can I align it to left?
How can I place small rounded button there?
HTML
<h3> Twitter time line </h3>
<table class="table table-condensed">
<thead>
<tr class="active">
<td class="active">Results</td>
<td class="success">Date</td>
<td class="warning">Time</td>
<td class="danger">Twitter user</td>
<td class="info">Reach</td>
<td class="active">Contant</td>
<td class="active">Tweet</td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="active">1</td>
<td class="success">john</td>
<td class="warning">carry</td>
<td class="danger">..dfd.</td>
<td class="info">.dfd..</td>
<td class="active">.fdfd..</td>
<td class="success">...dfd</td>
</tr>
</tbody>
</table>
<div class="row demo-row">
<div class="col-xs-6">
<h3> Twitter time line </h3>
</div>
<div class="col-xs-3"> Export
</div>
check this fiddle
read more about bootstrap grid system
JSFIDDLE
<div class="row buttonWithText">
<h3> Twitter time line </h3>
<div class="col-xs-3 export">
Export
</div>
</div>
body > div.row.buttonWithText
{
margin-bottom:10px;
}
div.col-xs-3.export
{
vertical-align:middle;
}
h3{
float:left;
margin:0px;
display:table-cell;
line-height:45px;
}
I am currently working on a web application in HTML5, where I have a table with two columns I want the first column width to be auto size so it's fit the content inside the column and the second column width to fill all the spare space
I tried the following:
<table style="width: 100%;">
<tr>
<td style="display: inline-block">
<div id="list">
<table>
...
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
But the second column always takes more width space than it should which cause the first column table rows to be multiline instead of one line.
Any idea?
Thanks
The first column's contents become multi-line because the only auto-size mode available is one that tries to shrink the column as much as possible. If you don't want the contents to wrap, specify this explicitly using white-space: nowrap.
.t1, .t2 { border-collapse: collapse; }
.t1 > tbody > tr > td { border: 1px solid red; }
.t2 > tbody > tr > td { border: 1px solid blue; }
.t3 td { white-space: nowrap; }
Example 1:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class=t2>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
<br>
Example 2:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class="t2 t3">
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
No need to use JavaScript, and no need to set the right-hand cell to a specific width tailored for specific left-hand cell content.
The solution is pretty simple thanks to Iaasch suggestion to use jQuery
$(document).ready(function() {
$('#left').css('width', $('#places-table').width());
});
<table style="width: 100%;">
<tr>
<td id="left">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
When you set a td to width:100%;, it means 100% of the tr. So, it will be the entire row. Try making the right td like width:75%;.
jQuery is your friend.
<table style="width: 100%;">
<tr>
<td id="left" style="display: inline-block; width: 100%;">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
and where you have your scripts add this:
$(document).ready(function() {
$('#left').css('width', $('#list').text().length * 7);
})