Solved

HTML5 CSS - <TD> align left

Posted on 2014-03-06
4
740 Views
Last Modified: 2014-03-07
I am trying to left align content that is in the <td> but I want the table centered on the page.

<!DOCTYPE html >
<html lang="en" >
<head>
    <title>
      Magic By Carlos
    </title>    
    <meta charset="utf-8" />
    <link href="magic.css" rel="stylesheet">

    <!-- This is where your link tag goes when linking to an external style sheet. -->
 
    <!--This is the format you will use when entering JavaScript -->    
    <script type="text/javascript">
    /* <![CDATA[ */

    // your JavaScript instructions will go here

    /* ]]> */
    </script>        
</head>

<body> 
    <div class=aligncenter>        
        <!-- Your XHTML here -->
        <!--
        <header>
            <img src="images/CtM2.jpg" alt="" height="225" width="325"> 
        </header>
        -->
        <h1 class=title>
            Be The Star Of The Show
        </h1>
        <nav>
            <h2>
            <a href="magic.htm"><b>Home</b></a> &nbsp;
            <a href="services.htm"><b>Services</b></a> &nbsp;
            <a href="video.htm"><b>Video</b></a> &nbsp;
            <a href="about.htm"><b>About</b></a>
            </h2>
        </nav>
    </div>    

    <div class=content>
        <table class=tablecenter>
            <tr>
                <td class=valigntop; style="width:500px" text-align:left>
                    <br>
                    <span class="firstLetter">A</span> magician performs magic in front of a person or group of people by creating illusions that seem supernatural.  '
                    Magic is performed many ways, the most commonly known are close-up and stage magic.
                </td>
                <td>
                    <img src="images/CtM2.jpg" alt="Magic By Carlos"
                            height="225" width="325"> 
                </td>
                <td class=valigntop; style="width:500px">
                    <br>
                    <span class="firstLetter">C</span>arlos not only performs mind blowing illusions but volunteers also appear to perform illusions becoming the
                    star of the show.
                    <br><br>
                    Carlos provides the below services:
                    <ul>
                        <li>Illusions</li>
                        <li>Comedy</li>
                        <li>Balloon Animals</li>
                    </ul>
                </td>
            </tr>
        </table>
        <br>
    </div>
    <br><br>

    <div>
        <footer>
            <small><i>Copyright &copy; 2014 Magic By Carlos</i></small><br>
        </footer>
        
        <br><br>
        <!-- external javascript for validation -->  
        <script type="text/javascript" src="../validation.js">
        </script>            
    </div>
</body>
</html>

Open in new window


.title {
    background-color: #630C0C;
    color: white;
    font-size: 65px;
}

.valigntop {
    display: table-cell;
    vertical-align: top;
}

.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

.tablecenter {
    margin-left:auto; 
    margin-right:auto;
}

.pretty-table {
    border-collapse: collapse;
    margin-left:auto; 
    margin-right:auto;
}
.pretty-table th, .pretty-table td { padding: 0.5em; }
.pretty-table th[scope=col]
{
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}
.pretty-table th+th[scope=col] { border-right: 1px dotted #666; }
.pretty-table th[scope=row] { border-right: 2px solid #333; }
.pretty-table th, .pretty-table td { color: #632a39; }
.pretty-table th[scope=col] { color: #000; background-color: #8fadcc; }
.pretty-table th+th[scope=col] { color: #fff; background-color: #7d98b3; }
.pretty-table th[scope=row] { background-color: #b8cfe5; }

.content {
    background-color: #F6F6FD;
    text-align: center;
}

.firstLetter {
    background-color: #3399FF;
    color: #FFF;
    float: left;
    font-size: 48px;
    margin-right: 10px;
    margin-top: 7px;
    padding: 18px;
    border-radius: 5px;
    box-shadow: 0 0 10px -2px #999999;
}

Open in new window

0
Comment
Question by:CipherIS
  • 2
4 Comments
 
LVL 14

Expert Comment

by:Pierre Cornelius
Comment Utility
to center the table, add this style:
.tablecenter {
    margin: 0 auto;
}

but I see you are already doing something similar. It appears fine on my side (Firefox), perhaps you should clear your cache and refresh. I attach a screenshot on how it looks in my browser without changing anything you posted.


The reason the text in the table is aligning center is because of this rule in your styles:
.content {
    background-color: #F6F6FD;
    text-align: center;
}

change the text-align to left
Capture.PNG
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
Tables always act funny.  Your table should be centered but if you want the table content to be aligned left then you need to make the <td>s aligned left.

And this: <td class=valigntop; style="width:500px" text-align:left>

should be: <td class="valigntop" style="width: 500px; text-align: left;" >
0
 
LVL 1

Author Closing Comment

by:CipherIS
Comment Utility
Thank you.  That was so frustrating trying to figure it out.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You're welcome!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now