can anyone advise how do i convert the below html table into div? I tried to do some googling but not able to find a specific examples on this. Would appreciate if anyone can provide me with some sample codes or point me to the right direction.
Thanks
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
List of news
</td>
</tr>
<tr>
<td width="20%">
Title
</td>
<td width="5%">
:
</td>
<td width="75%">
Name of title
</td>
</tr>
<tr>
<td valign="top">
Description
</td>
<td valign="top">
:
</td>
<td valign="top">
Content of description
</td>
</tr>
</tbody>
</table>
Live demo : http://jsfiddle.net/satinder_singh1/TdAWY/
demo with content
http://jsfiddle.net/satinder_singh1/TdAWY/1/
<div class="headDiv">
<div class="c1 w1" >
sd
</div>
<div class="c1 w20">s
</div>
<div class="c1 w5"> s
</div>
<div class="c1 w75">s
</div>
<div class="c1 w20">s
</div>
<div class="c1 w5"> s
</div>
<div class="c1 w75">s
</div>
</div>
.c1
{
float:left;
}
.headDiv
{
width:100%;
border:1px soild blue;
}
.w75
{
width:75%;
height:50px;
border-bottom:1px solid;
}
.w20
{
width:20%;
height:50px;
border-bottom:1px solid;
}
.w5
{
width:5%;
height:50px;
background-color:Yellow;
border-bottom:1px solid;
}
.w1
{
width:100%;
height:50px;
background-color:pink;
border-bottom:1px solid;
}
Use tabletodivconverter.com/ to convert html tables to div.
Related
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
I am having trouble reducing the height of the table cells in rows 1 and 2. I tried setting the table rows to 100 pixels within html, but when I do that table cells below the row grow larger as if compensating for the missing space. I do not see this happening in the fiddle below, but I am having this problem in Chrome. I would appreciate any help. The relevant code is below, and the full page is in the fiddle.
https://jsfiddle.net/9qLg7c31/2/
HTML:
Resume Page
<br>
<table class="no-spacing">
<tr style="height:100px">
<td>
Northwestern University
</td>
<td>
Class of 2016
</td>
<td>
Bachelors of Science in Journalism
</td>
<td style="text-indent: 10px">
Integrated Marketing Certificate
</td>
</tr>
<tr>
<td>
Field
</td>
<td>
2012
</td>
<td>
2013
</td>
<td>
2014
</td>
<td>
2015
</td>
<td>
2016
</td>
</tr>
<tr>
<td>Content Marketing</td>
<td style="background-color:white">
<div class="dropdown";>
<img src="http://st.hzcdn.com/fimgs/5f33bbc80182569c_3779-w173-h173-b1-p0--whatasteele.jpg">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: white">
</td>
<td>
</td>
<td style="background-color: white">
<div class="dropdown">
<img src="http://www.reelnreel.com/wp-content/uploads/2015/01/Wochit.png">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color:white">
</td>
</tr>
<tr>
<td>
Multimedia Journalism
</td>
<td>
</td>
<td>
</td>
<td style="background-color: blue">
<div class="dropdown">
<img src="http://www.complaintsboard.com/thumb.php?src=chicago-tribune.jpg&wmax=900&hmax=900&quality=90&nocrop=1&bname=120767">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: black">
<div class="dropdown">
<div class="dropdown-content">
<img src="http://onekreate.com/wp-content/uploads/2014/04/40_Inc_Magazine.jpg">
</div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>Volunteer Work</td>
<td style="background-color: purple">
<div class="dropdown">
<div class="dropdown-content">
<img src="https://pbs.twimg.com/profile_images/570772503543291904/uYixut-M.jpeg" style="width:100px; height:100px">
</div>
</td>
<td style="background-color: purple">
</td>
<td style="background-color: purple">
</td>
<td>
</td>
<td>
</tr>
</table>
CSS:
#resume {
width: 100%;
height: 150%;
background-color: rgb(0,300,200);
margin-bottom:0px;
z-index:0;
}
#resume table{
background-color: rgb(0,200,200);
margin-left: 2.5%;
width:95%;
height:100%;
padding-bottom:10px;
border-radius: 20px;
}
#resume table ul{
color: rgb(0,300,200);
font-size:20px;
}
.no-spacing {
border-spacing:0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display: hidden;
}
.dropdown:hover .dropdown-content{
display:block;
position: relative;
width:300px;
}
#resume table th{
padding:15px 0 15px 0;
}
#resume table img{
width:150px;
height:100px;
}
#resume table tr:nth-child(3), #resume table tr:nth-child(4), #resume table tr:nth-child(5){
height:200px;
}
I am trying to vertically center text inside my TDs.
I have tried the following but I'm unable to achieve desired results.
<table class="student_table">
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
float:left;
font-weight: bold;
font-size: smaller;
text-align:center;
display: inline-block;
vertical-align: middle; <!-- < This is not working-->
}
Just Remove
float:left;
from
.batch_header td{ }
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle; <!-- < This is not working-->
}
<table class="student_table" border = 1>
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
</table>
JSFiddle Demo
Note: I have given border to table for visibility purpose.
Update:
Please see Demo2 Here
Just Added line-height: 1.9; in CSS
If you take out the display: inline-block; and float: left; lines, it will look the way you want.
No CSS needed because you are using tables and tables own sometimes
Here is the table for you
<table width="200">
<tr>
<th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
</tr>
</table>
Here is a demo for you
https://jsfiddle.net/1zhdLb55/1/
I am a beginner and I have a doubt. I created this HTML table and I need to place the footer at the bottom of the page without using footer tag. Is there any way to place the footer at the bottom by using table? It will be helpful
<table>
<tr>
<h2><img src="lock.jpg" width="80" height="30"/>Welcome to Locker</h2>
</tr>
<tr>
<td>
<form>
<table align="center">
<tr>
<td align="right">
<h4><p> Lock name:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/>
</h4>
</td>
<td>
<h6 id="errfn"> </h6>
</td>
</tr>
<tr>
<td align="right">
<h4><p> Key:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/>
</h4>
</td>
<td>
<h6 id="error"></h6>
</td>
</tr>
<tr>
<td align="right"></td>
<td align="left">
<input id="gobutton" type="submit" value="Go!"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<p id="about">About</p>
<p id="contact">Contact us</p>
<p id="career">Careers</p>
<p id="press">Press</p>
</td>
</tr>
</table>
have a look here http://jsfiddle.net/25LKc/
use a <div><!-- footer content here --></div> as a wrapper
with position fixed;
<!-- your html here -->
</td>
</table>
<div class="footer"></div>
<style type="text/css">
.footer {
background-color:orange;
width:100%;
height:400px;
position:fixed;
bottom:0px;
}
</style>
You can use some CSS and a bit of HTML to place it, in your table tab have:
and then above it have some code for css like:
<script>
.table {
position:fixed;
bottom:0px;
}
</script>
This will place the table at the bottom
Answering your question, for your table layout to have 100% height you need to set some CSS properties:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#my_table {
height: 100%;
}
And in the HTML:
<table id="my_table">...</table>
You can place any element to the bottom by just adding this css to any of your classes or id's.
//CSS
{
position:fixed; /*Set this to absolute if you do not want it to be on bottom always*/
width:100%;
bottom:0px;
left:0px;
height:80px;
}
//Practical Usage
<html>
<head>
<style type="text/css">
.footer {
position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
background: rgb(216, 216, 216);
height: 80px;
text-align: center;
}
.content {
position: relative;
width: 100%;
background: rgb(16, 16, 85);
height: 600px;
margin-bottom: 100px;
color: white;
}
</style>
</head>
<body>
<!--Page Content-->
<div class="content">
<table align="center">
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
</table>
</div>
<!--Footer Table-->
<table class="footer">
<td>Footer Goes Here</td>
</table>
</body>
</html>
JSFiddle Example I've Created : http://jsfiddle.net/mm6qc/
The vertical scroll works, but the horizontal doesn't. My code:
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:100%; width:100%">
<table style=" width:2000px; height:2000px; ">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Table is not an ideal element to use unless u want to display a table/table of contents.
Always prefer divs than tables.
This should do inside ur <body>
<div style="height: 100%; width: 100%">
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td>
</td>
</tr>
</table>
</div>
With Table u will have to set table-layout:fixed ,
<table style="height: 100%; width: 100%; table-layout:fixed">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td style="width:50%; display:none">
</td>
<td style="width:50%; display:none">
</td>
</tr>
<tr>
<td>control here will auto-align to 50%</td>
<td>control here will auto-align to 50%</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have modified the td template. Please note that as well.
i changed your code like this
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:2000px; width:100%">
<table style=" width:2000px; height:2000px; overflow:scroll;">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
try this.it will work..