How Do I Indent Text?

I want to make it so my title in the tabe is slightly indented, how do I do that?

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500" align="left" valign="middle">Title</td>
</tr>
<tr>
<td align="left" valign="top">
</p>Content
</td>
</tr>
</table>

Code (markup):

I want the title to start about 10px from the left side if possible.

 

Use cellpadding="10"

Alternative, use CSS styles, e.g.:

<td width="500" align="left" valign="middle" style="padding-left: 10px;">Title</td>

Code (markup):

 

If you don't want that cell to be padded by 10px; on all 4 sides and only the left and right side, then you use the old hspace attribute , but be careful, because apparently, one day, browsers will no longer accept this tag.

 

<style type="text/css">
<!--
#gobbly {
width:500px;
border:0;
margin:0;
padding:0;
text-align:left;
}

#gobbly th {
text-indent:10px;
vertical-align:middle;
}

#gobbly td {
vertical-align:top;
}

-->
</style>

<table id="gobbly">
<tr>
<th>Title</th>
</tr>
<tr>
<td>Content</td>
</tr>
</table>

 

What danfinney said so eloquently with clean code. We're talking appearance here... First off it's a header so use a TH instead of a TD, and get all that presentational nonsense out of the html and into CSS.

I'd also add border-collapse:collapse so you get uniform behavior across all browsers.

Yeah, going through it my HTML for that would be identical to danfinney's, though my css would read:

* {
margin:0;
padding:0;
}

table {
border-collapse:collapse;
}

#gobbly {
width:500px;
}

#gobbly th {
padding-left:10px;
vertical-align:middle;
}

#gobbly td {
text-align:left;
vertical-align:top;
}

Mind you, using the universal selector to null all margins/padding and making all tables collapse their borders might require a rewrite of everything else you've done - but it is the easiest way I've found to write cross-browser code. The reason I used left-margin is I figure if the title wraps to two lines, you'd want the wrap indented too.

 

Why not just div it out or p it out and give it a margin of 10? That would take care of the multiple line problem

 

That's also a good point - I'm assuming he's using a table for one of the handful of legitimate reasons to do so...

1) More than one column that need equal length.

2) Need for vertical positioning of dynamic content.

Uhm... Uhm... Yeah, one of those. There's only two good reasons... and the first of those is iffy.

If it doesn't qualify as one of those, I'm with you. Drop the table and use a DIV, or even better, a header tag.

<h2>Title></h2>
<div class="content">
<p>Test Content</p>
<p>Test Content</p>
<p>Test Content</p>
<p>Test Content</p>
</div>

Only one column, not trying to vertically center or make content flush-bottom... NO REASON to use a table.

 

Good call on the zero margins and the border collapse, deathshadow. I added some reps for you. (and giving the verbal explanation of what I said with just code)

I start all of my css documents with the block below.

/* --------- Normalize ---------- */

* {
margin: 0;
padding: 0;
}


/* Normalize header sizes */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

/* Normalize list styles */
ol, ul {
list-style: none;
}

/* Normalize table borders */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* --------- End Normalize ---------- */