Member Avatar for SADIYA4

hey i am designing a website and i want the design part to be in center of the page(ref:http://www.sacredheartschool.com/)

I saw the code they have used div tag.... but it can be done using table tag also but i am not getting it.... so plzz help me

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

asked how to center a site layout like the example. Tables can be centered, but using a table for overall page layout is outdated and harms accessibility and responsiveness. As hinted, older HTML attributes exist but are deprecated; and was right that some centering techniques depend on an element having a constrained width. Modern, robust options are: use a centered wrapper with a max-width (responsive), use Flexbox to center without fixed widths, or — if a table must be centered and its width is unknown — use the inline-table trick shown below.

A compact Flexbox approach (recommended for a centered page column with responsive max width):

<!DOCTYPE html>
<html>
<head>
<style>
html,body { height:100%; margin:0; }
body { display:flex; justify-content:center; }
.site-wrap { width:100%; max-width:1100px; box-sizing:border-box; padding:0 16px; }
</style>
</head>
<body>
  <div class="site-wrap">
    <!-- site content here -->
  </div>
</body>
</html>

If a table must be centered and its width should adapt to content, wrap it in a parent with centered text and render the table as an inline-table:

<div class="centerer">
  <table class="main-layout">...</table>
</div>

<style>
.centerer { text-align:center; }
.centerer table { display:inline-table; text-align:left; }
</style>

Practical notes: prefer max-width over a fixed width for responsiveness; add box-sizing:border-box so padding does not inflate the width; use semantic HTML5 (doctype shown above) and validate with the official validator. For background reading and modern techniques see and the Flexbox guide on MDN, or check markup with the W3C validator.

Recommended Answers

All 2 Replies

Member Avatar for StefanCP

You might be looking for this?

<table align="center">

Also, it might be good to take your time and study a html tutorial, if you are willing to make a website in html.
http://www.w3schools.com/html/DEFAULT.asp - tutorial

Edited by StefanCP because: Added something
Member Avatar for ko ko

Use auto margin to align center for block-level elements.

table {
        margin: 0 auto;
        width: 90%
          }

Auto margin can only work when the width was set. And you must validate your HTML document. You're designing with table, so you should validate with HTML 4.01. Here is transitional mode:

<!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01 Transitional//EN" "http:www.w3.org/TR/html4/loose.dtd">

Try this and if you would not get success. please post again.. Good luck .. friend..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.