Converting tables to div


#1

Hello, how can I easily convert this html with tables to html with divs. Should I include CSS with the html or have it separate? I have to send this html file to a coworker so she can upload it to CVENT, so I'm not sure they can handle an html file along with a css one. Help, please. Thanks. I'm used to designing emails, so tables are a habit.

Can someone help with CSS aspect of it? The h1, for instance, is not working. Sorry

Thanks!

Here is the updated code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
	
  <style>
	  
	  .h1
	  {color: #990000;
		display: block;
		font-family: Helvetica, sans-serif;;
		font-size: 24px;
		line-height: 34px;
		font-weight: 700;
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
		margin-left: 0 !important;
		text-align: center;
	  }
		  
  </style>
		  
</head>
<body style="margin: 0; padding: 0;">

<div class="jumbotron text-center">
  <h1>InterFace Multifamily Texas<br />to be Held September 26th in Dallas</h1> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
      <p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
      <p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
      <p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
    </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Topics to be Discussed</h3>
      <ul>
		<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
		<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
		<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
		<li>What's the &quot;Big Picture&quot; outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
		<li>The availability of debt and equity capital for multifamily investment and development projects</li>
		<li>Operations trends and issues impacting the bottom line</li>
		<li>Architecture/design trends in new product</li>
		<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li></ul>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p><img src="http://interfaceconferencegroup.com/shs17/images/ShakeHands.png"></p>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Who Should Attend?</h3>
      <ul>
		<li>Owners/Investors/Developers</li>
        <li>Operators/Managers</li>
        <li>Lenders/Financial Intermediaries</li>
        <li>Investment Sales Brokers, Appraisers, Attorneys</li>
        <li>Architects, Design Specialists, Contractors</li>
        <li>Leasing & Marketing Professionals</li>
        <li>Vendors and Others Allied to the Field</li></ul>
		And anyone investigating or interested in learning more about the multifamily markets in Texas!
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Additional InterFace Event Happening on September 27!</h3>
      <p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business,  Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
    </div>
  </div>
</div>

</body>
</html>

#2

@nickjtopolski
<off-topic>
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
</off-topic>


#3

Simply remove everything except the content between <td></td> then convert all the <td> to <div> and </td> to </div>.


#4

Ok, fixed.


#5

What about the CSS?


#6

This is my new code. Can anyone help with css please? My h1 isn't working.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
	
  <style>
	  
	  .h1
	  {color: #990000;
		display: block;
		font-family: Helvetica, sans-serif;;
		font-size: 24px;
		line-height: 34px;
		font-weight: 700;
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
		margin-left: 0 !important;
		text-align: center;
	  }
		  
  </style>
		  
</head>
<body style="margin: 0; padding: 0;">

<div class="jumbotron text-center">
  <h1>InterFace Multifamily Texas<br />to be Held September 26th in Dallas</h1> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
      <p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
      <p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
      <p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
    </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Topics to be Discussed</h3>
      <ul>
		<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
		<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
		<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
		<li>What's the &quot;Big Picture&quot; outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
		<li>The availability of debt and equity capital for multifamily investment and development projects</li>
		<li>Operations trends and issues impacting the bottom line</li>
		<li>Architecture/design trends in new product</li>
		<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li></ul>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p><img src="http://interfaceconferencegroup.com/shs17/images/ShakeHands.png"></p>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Who Should Attend?</h3>
      <ul>
		<li>Owners/Investors/Developers</li>
        <li>Operators/Managers</li>
        <li>Lenders/Financial Intermediaries</li>
        <li>Investment Sales Brokers, Appraisers, Attorneys</li>
        <li>Architects, Design Specialists, Contractors</li>
        <li>Leasing & Marketing Professionals</li>
        <li>Vendors and Others Allied to the Field</li></ul>
		And anyone investigating or interested in learning more about the multifamily markets in Texas!
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Additional InterFace Event Happening on September 27!</h3>
      <p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
	  </div>
  </div>
</div>
	
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business,  Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
    </div>
  </div>
</div>

</body>
</html>

#7

Try removing the dot before the h1. .h1 is targetting something with a class of h1, rather than the element.


#8

Ok, thanks!


#9

What about padding, justification, containers, etc?


#10

Apply whatever padding, margin etc you want to your .container, .row or .col-sm-4 classes.


#11

Thanks guys. How do I center the image now?


#12

An image is an inline element and can be centred just like text by using text-align:center on the parent container of the image. Or alternatively set the image itself to be display:block and then use margin:auto to centre it.


#13

Thanks. Sorry, but why doesn't the p5 work at the bottom of the code (see below)? It's supposed to be Helvetica (like the rest of the font) but smaller. It shows up in a serif font for some reason. Also, how do I shorten my <hr> lines? When placed into cvent, the <hr> lines are too long and run off the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Multifamily Texas – Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
		  
</head>
<body style="margin-left: 20px; margin-right: 20px; padding: 0;">

<div>
	<h1>InterFace Multifamily Texas to be Held<br>September 26th in Dallas</h1> 
</div>
  
<div class="container1">
	<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
	<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
	<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
	<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
	
<div class="container">
	<hr style="margin-bottom: 20px;" />
	<h3>Topics to be Discussed</h3>
    <ul>
		<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
		<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
		<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
		<li>What's the &quot;Big Picture&quot; outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
		<li>The availability of debt and equity capital for multifamily investment and development projects</li>
		<li>Operations trends and issues impacting the bottom line</li>
		<li>Architecture/design trends in new product</li>
		<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li>
	</ul>
</div>
	
<div class="container3">
	<p4><img src="http://interfaceconferencegroup.com/mftx18/images/MFTX-ShakeHands.jpg"></p4>
</div>
	
<div class="container">
	<h3>Who Should Attend?</h3>
   	<ul>
		<li>Owners/Investors/Developers</li>
        <li>Operators/Managers</li>
        <li>Lenders/Financial Intermediaries</li>
        <li>Investment Sales Brokers, Appraisers, Attorneys</li>
        <li>Architects, Design Specialists, Contractors</li>
        <li>Leasing & Marketing Professionals</li>
        <li>Vendors and Others Allied to the Field</li></ul>
	<p>And anyone investigating or interested in learning more about the multifamily markets in Texas!</p>
</div>
	
<div class="container">
	<hr style="margin-bottom: 20px;" />
	<h3>Additional InterFace Event Happening on September 27!</h3>
	<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
	
<div class="container">
	<hr style="margin-bottom: 20px;" />
	<p5><b>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p5>
</div>

</body>
</html>

#14

There is no such element in HTML.

Just add a class to the paragraph and style it accordingly. Set font-size to 80%, or 0.75em, or whatever suits.

Have you tried setting a width on it in your CSS?


#15

Yes, just did, but now this is happening. The type is running off the page:

Here is my css:

@charset "UTF-8";
/* CSS Document */

h1 {color: #333;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

h2 {color: #fff;
	display: block;
	font-family: Minion Pro, Times New Roman, serif;
	font-size: 42px;
	font-weight: 700;
	font-style: italic; 
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

h3 {color: #333;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	margin-top: 0px !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

h4 {color: #fff;
	display: block;
	font-family: Minion Pro, Times New Roman, serif;
	font-size: 28px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

h5 {color: #666;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

p {color: #666;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	line-height: 23px;
	font-weight: normal;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: left;
	
}

p2 {color: #fff;
	display: block;
	padding-top: 15px;
	padding-bottom: 5px;
	font-family: Helvetica, sans-serif;
	font-size: 22px;
	font-weight: 500;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

p3 {color: #666;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

p4 {display: block;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: center;
	
}

p5 {color: #666;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: normal;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: left;
	
}

ul {color: #666;
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	line-height: 25px;
	font-weight: normal;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	text-align: left;
	
}


.container {padding-right: 15px;
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{
	
.container1 {padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 20px
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{
	
.container2 {padding-right: 15px;
	padding-left: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #dce4ea;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{

.container3 {padding-right: 15px;
	padding-left: 15px;
	padding-top: 25px;
	padding-bottom: 15px;
	align-content: center;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{

.container4 {padding-right: 15px;
	padding-left: 15px;
	padding-top: 25px;
	padding-bottom: 15px;
	background-color: #375e97;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{
	
.container5 {padding-right: 15px;
	padding-left: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #dce4ea;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{
	
.container6 {padding-right: 15px;
	padding-left: 15px;
	padding-top: 25px;
	padding-bottom: 35px;
	margin-right: auto;
	margin-left: auto}
    @media (min-width:768px)
	
{


.button {transition: all 100ms ease-in; /**doubtful in emails**/
	background: #375e97;
	border-radius: 8px;
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 16px;
	text-decoration: none; 
	display: block;
	color:#ffffff;
	text-align:center;
}
	

.button:hover {transition: all 100ms ease-in; /**doubtful in emails**/
	background: #555;
	border-radius: 8px;
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 16px;
	text-decoration: none; 
	display: block;
	color:#ffffff;
	text-align:center;
}

#16

There are several problems there that I see at a glance.

<p4>, <p5> etc. are not valid HTML elements.

Your media queries are all missing the closing }.

(And you really shouldn't need all those !important rules. That's usually an indication of an underlying problem.)


#17

Thanks, I understand. But how do I separate each section and streamline them at the same time. What could I use for a substitute for let's say, p3, p2, etc?

This is why I need them:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
		  
</head>
<body style="margin: 0; padding: 0;">

<div>
  <h1>Register Now!</h1>
  <h5>Registration is $359 and $289 for each additional attendee from the same company.</h5>
</div>
  
<div class="container6">
	<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
    	<tr>
        	<td bgcolor="#375e97" align="center" colspan="2"><p2>Regular Registration Pricing</p2></td>
            	</tr>
  					<tr>
      					<td width="50%" style="padding: 10px;"><p3>Single Attendee</p3></td>
                        <td width="50%" style="padding: 10px;"><p3>$359</p3></td>
    				</tr>
                    <tr>
      					<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Two Attendees</p3></td>
                        <td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$648</p3></td>
    				</tr>
    				<tr>
      					<td width="50%" style="padding: 10px;"><p3>Three Attendees</p3></td>
                        <td width="50%" style="padding: 10px;"><p3>$937</p3></td>
    				</tr>
                    <tr>
      					<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Four Attendees</p3></td>
                        <td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1226</p3></td>
    				</tr>
                    <tr>
      					<td width="50%" style="padding: 10px;"><p3>Five Attendees</p3></td>
                        <td width="50%" style="padding: 10px;"><p3>$1515</p3></td>
    				</tr>
                    <tr>
      					<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Six Attendees</p3></td>
                        <td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1804</p3></td>
    				</tr>
	</table>
</div>
	
<div class="container5">
      <h3>Refund Policy</h3>
      <p><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30  days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This  credit must be used within one year of the conference date to apply to  another InterFace conference, for an equal or lesser amount.</p>
      <p align="center">InterFace Conference Group/France Media, Inc. <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/7e42d5bc6e55405e8c8bd7f280de4d3c.doc" target="_blank">Attendance &amp; Substitution Policy</a> and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx" target="_blank">Privacy Policy</a></p>
</div>
	
</body>
</html>

#18

I'm sorry, but I don't understand from that why you need them. If it's because you need different styling on the different paragraphs, then do as I've already suggested and add classes to the paragraphs, which you can use to attach the styles.


#19

Thanks, how do I add classes? I'm still new.

? then for css, .??

The ?? being the item/style


#20

Also, how do I set a max width for my containers? I want them to be no longer than 850px so they don't run off the page template in cvent.