|
HTML - Aligning Text In Tables
http://www.miamiknight.com/table.htm
How do I get the text in all 3 columns to align at the top? I had to add breaks or rows in column 3 at the bottom to bring the text higher and then column 2 had the text drop lower. Is there an easy way to always have text align at the tops of each column? Similar TutorialsHey there, I have some text in a table that i want to vertically align center, however nothing i try with html or css seems to work. This is my current code atm; Code: <table cellpadding="0">
<tr>
<td width="150" height="100" style="vertical-align:middle">
<img src='portals/default.jpg' > </td><td style="vertical-align:middle">
<h3><b><a href="/games/node/2">Welcome to the Halo Portal</a></b></h3><i><div style='font-size:0.9em; line-height: 0.3em;'>Posted by NightFox, on 15/03/09</div></i><br /><div style='line-height: 0.2em'><p>Welcome to the Halo Portal</p>
</div>Halo <td></tr>
</table>
I want it all to vertically aligned centrally so that the text will line up with the center of the thumbnail - attached is wat it looks like atm. If anyone has any ideas please let me know (html, css, or php i don't mind) Regards NightFox Hey guys, i have 3 tables that I want to align like 1 2 3 at the moment they are 1 2 3 any ideas, here is the code i have HTML Code: <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>Xbox 360 GT:</td> </tr> <tr> <td><input type="text" name="x360gt" value="x360" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit1" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PS3 GT:</td> </tr> <tr> <td><input type="text" name="ps3gt" value="ps3" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit2" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PC GT:</td> </tr> <tr> <td><input type="text" name="pcgt" value="pc" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit3" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> Could anyone help me out please Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong? <table> <tr> <td align="left"> <p>Im suppose to be on the left side of the screen</p> </td> <td align="right"> <p>Im suppose to be on the right side of the screen</p> </td> </tr> </table> Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Hi! I downloaded this script off the net: http://www.htmlforums.com/attachment...1&d=1178321623 (or download attachment) and modded it to my needs. The only problem is that the orange blob on the top left breaks up (I think due to the way the tables are set up... i'm not sure i'm a BIG NOOB at HTML). This happens ONLY when I have large amounts of content... To see a live preview of this problem... please visit my website: http://www.netsafehouse.com/ http://www.netsafehouse.com/index.html << This is what the script should look like... it looks fine... BUT http://www.netsafehouse.com/Radio.html << It breaks up here. Please tell me what to do (I'm using dreamweaver)... thanks!! Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it. The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table. The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page. The code for the table and a screenshot of table/lyric box is below. The image that I'm trying to put next to it is: The outcome that I'm looking for is: Thanks in advance. Hi, I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage. It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7. I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me. The website is www.ritzphoto.net/newsite/ css Code: body {
margin: 0px;
padding: 0px;
background: #242323;
text-align: justify;
font: 13px Arial, Helvetica, sans-serif;
color: #444444;
}
h1, h2, h3 {
margin-top: 0px;
font-weight: normal;
color: #FFFFFF;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
p, ol, ul {
margin-bottom: 1.8em;
line-height: 160%;
}
a {
color: #000000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a img {
border: none;
}
#wrapper {
width: 900px;
margin: 0 auto;
border: 10px solid #FFFFFF;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 0px auto;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Logo */
#logo {
float: left;
padding-left: 20px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
}
#logo h1 {
padding: 25px 0px 0px 0px;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0px;
padding: 49px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin: 0px;
}
#menu a {
display: block;
width: auto;
padding: 6px 20px;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active {
background: #404040;
}
#menu .active a {
background: url(images/img02.gif) no-repeat 100% -40px;
}
/* AWM */
#awmAnchor-menu {
width: 900px;
padding: 10px 0px 0px 0px;
background: #FFFFFF;
margin: 0px auto;
}
/* Page */
#page {
width: 900px;
margin: 0px auto;
padding: 10px 0px 0px 0px;
background: #FFFFFF;
}
#header-pic {
background: url(images/img05.jpg) no-repeat left top;
width: 900px;
height: 210px;
}
/* Content */
#content {
float: right;
width: 570px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}
.post .title h1 {
}
.post .entry {
padding: 0 20px;
}
.post .meta {
font-weight: bold;
padding-left: 20px;
}
.post .byline {
margin: 0px;
padding-left: 20px;
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
}
#sidebar-bgtop {
}
#sidebar-bgbtm {
background: url(images/img03.jpg) no-repeat left bottom;
}
#sidebar-content {
background: url(images/img01.jpg) repeat-y left top;
}
#sidebar ul {
padding: 0px 0 5px 0;
margin: 0px;
list-style: none;
}
#sidebar li li {
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}
#sidebar h2 {
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Search */
#search {
}
#search form {
margin-bottom: 1.8em;
padding: 0px;
}
#search fieldset {
margin-left: 20px;
padding: 0px;
border: none;
}
#search #s {
width: 160px;
}
/* Footer */
#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #FFFFFF;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}
#footer a {
color: #FFFFFF;
}
Cheers, Dave Hi all, what is the best method to align sets of labels, drop down lists, text input fields, images, and buttons with html? The file I attached is how I would like it to be formatted. I achieved this using tables, but had to play around with alignments and pixel adjustment for a really long time before they were just right. For reference, here is how I coded it: Code: <table style="width:768" cellpadding="0" cellspacing="0"> <td style="width:142" align="right"> <label for="county">* County : </label> </td> <td style="width:192" align="left"> <select name="county" id="county" class="ListBox"> <option selected>BEAUFORT</option> <option>HYDE</option> <option>MARTIN</option> <option>TYRELL</option> <option>WASHINGTON</option> </select> </td> <td style="width:40"></td> <td style="width:100" align="right"> <label for="caseOpened">* Case Opened : </label> </td> <td style="width:172" align="left"> <input type="text" size="10" maxlength="10" name="caseOpened" id="caseOpened"> mm/dd/yyyy </td> <td style="width:22" align="left"> <a href="#"><img src="images/calendar.gif" width="16" height="16" vspace="0" border="0" alt="Calender"></a> </td> <td style="width:100"> <input type="button" class="button" name="today" value="Today" onClick="setTodaysDate(caseOpened)"> </td> </table><br> <table style="width:768" cellpadding="0" cellspacing="0"> <td style="width:142" align="right"> <label for="localNumber">Local Number : </label> </td> <td style="width:192" align="left"> <input type="text" size="20" maxlength="15" name="localNumber" id="localNumber"> </td> <td style="width:40"></td> <td style="width:100" align="right"> <label for="caseNumber">* Case Number : </label> </td> <td style="width:294" align="left"> <input type="text" size="11" maxlength="11" name="caseNumber" id="caseNumber"> </td> </table><br> I'm definitely new to html, and had heaps of trouble getting the tables to display properly. Surely there must be an easier method. Also, is there a way to make static html pages resize themselves accordingly in respect to your browser size? Appreciate all the help in advance Hi, I seem to have lost the code I had for aligning text. I know it's simple, can someone help me. Take a look at my newsletter at http://www.ilovejesus.com/lot/awesomebks/news.shtml. You will note the text is not lined up correctly with the book covers. I don't want it to be completely lined up like a newspaper, just look a little better than it does. Thanks. I didn't screw this page up like the earlier page I posted.I inserted text ,but am unable to align it properly.Any help would make me and Kelli Maroney very happy this New Year. Hi, I want to align some text but not with the center or something but i want it to aling to a square on my background image and i also want to make it so that is looks the same on widescreens. at the moment i do it like this <BODY leftmargin="150%" topmargin="220%"> f </BODY> But when i enter window mode the text also moves. can someone help me with tihs ? Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike Hi, Does this look right i cant to have a header image and align come copy over it: <body> <!-- NEWS 1 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 1</h2> <!-- NEWS 2 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 2</h2> </body> h2 { position: relative; top: -37px; left: 135px; text-align: right; width: 150px; } I have a cell text linked to a css stylesheet. the style for that "text" is as follows: .text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align:left } How do I align the text to the top of the cell rather than middle? I'm new ,but had some success editing a website.I'm having trouble aligning the new text with the rest of the page. http://www.kellimaroney.com/press.html <ul> <li><strong>2010</strong><br> <blockquote> <p xmlns="http://www.w3.org/1999/xhtml" id="sites-page-title-header"><a href="http://www.youtube.com/user/RockandRollIncTV">New Web Series:Rock & Roll,Inc</a></p> <p xmlns="http://www.w3.org/1999/xhtml"> </p><p xmlns="http://www.w3.org/1999/xhtml"><strong><a <ul> <blockquote> <p xmlns="http://www.w3.org/1999/xhtml" id="sites-page-title-header"><a href="http://www.examiner.com/horror-in-national/exclusive-interview-with-actress-kelli-maroney-1 ">Horror Examiner Interview</a></p> <p xmlns="http://www.w3.org/1999/xhtml"> </p> <p xmlns="http://www.w3.org/1999/xhtml"><strong><a Hi, I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas? Thanks. I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help? <div id="myBox"> <p>4 Wheel Madness</p> <img src='sampleimage.png' width="65" height ="65" alt="img"> </div> What would i add to this to make the image go to the LEFT of the box, and then the text to go to the RIGHT of the box? ##### Text here, ##### Text here, ##### Text here, ^ Just like that Thank you for any comments Hi, I've been trying to set up a page where I have my e-mail address on one side of the page and my phone number on the same line but on the other side of the page. The e-mail address aligns left automatically, and when I use <p align=right>, it moves the phone number down onto the next line. <align=right> on its own does nothing. Does anyone know the code to align right without bumping the text down to the next line? Thank you so much for any help you can provide. Michael |
|||||||