Member Avatar for wburritt

Hi: I just changed my heading class in css to H1 for SEO purposes. That's fine. But now, the tables don't look right: There's too much space between the rows. I've tried everything to make it look right. I just want the H1 heading to be right above the following cell right below it. It looked fine with I was using a heading class in css. Here's the first row of the table:

<table width="95%" border="0" align="center" cellpadding="2" cellspacing="0">

<td width="30%"><h1>Solutions for Small Cap Companies</h1></td>
<td width="32%"><h1>Our Team</h1></td>
<td width="38%"><h1>Why Independent Research?</h1></td>
</tr>
<tr>
<td class="BodyText"><p>Burritt Research, Inc. (BRI) provides cost-effective independent stock research <a href="solutions_companies.htm">solutions for small capital (small cap) companies</a> seeking increased visibility and value for their shares. Our independent, third-party equity research products &ndash; together with our rich distribution network -- can make an immediate impact on the value and trading volume of a small cap company&rsquo;s stock.</p></td>
<td class="BodyText"><p>BRI is headed by equity research veteran<a href="jwb_bio.htm"> J. Wayne Burritt</a>. With over 24 years of experience, Wayne has a rich background &ndash; including tenure at one of the largest independent research firms in the US &ndash; combined with a no-nonsense, street-smart style. He also holds BRI to the &ldquo;gold standard&rdquo; of <a href="ethics.htm">independent research ethics</a>.</p></td>

Thanks for any help. wayne

  • 2 Contributors
  • 1 Reply
  • 117 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Browsers give heading elements default top/bottom margins, so swapping a styled class for real H1 tags will often add extra vertical gaps inside table cells. As suggested, reset the heading spacing and control line-height; target only headings inside the table if you do not want to affect every H1 on the site.

Try a minimal CSS reset for headings (and a table-cell rule to keep content aligned to the top):

/* reset heading spacing sitewide */
h1 {
  margin: 0;
  padding: 0;
  line-height: 1.15;
}

/* if you only want to change H1s inside table cells */
td h1 {
  margin: 0;
  padding: 0;
}

/* ensure cell content sits at the top of the row */
td { vertical-align: top; }

Use the browser inspector to look at the computed styles and the user-agent (default) stylesheet: that will show the H1 margins coming from the browser. If you need a little breathing room, give a small explicit margin-bottom (for example margin-bottom: .25em) instead of relying on defaults. Also prefer CSS td { padding: 2px; } over the deprecated cellpadding attribute.

For semantics and SEO: avoid turning lots of small labels into H1 purely for styling. The main page title should be the primary H1; use H2/H3 or a CSS class for repeated column headings, or wrap headings in proper sectioning elements if you need multiple H1s (see MDN on heading semantics). For reference on browser default spacing and CSS properties, consult MDN: Heading elements and margin.

Member Avatar for Dani

Try setting the padding: and margin: properties for the H1 tag CSS.

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.