What's wrong with me? My HTML tables just suck.

[displacedtexan]

Please help a newbie HTML-er if you can.

I was blogging about Bush* rewriting the Executive Order relating to classified information, and my table ended up with a weird gigantic space between the intro text and the table header. Then, I couldn't get it to start the second column at the top of the cell.

I truly suck at table code! You can see the embarrassing results on my blog (the link is under the burning Bush below). Here's the code:

<span style="font-weight: bold; color: rgb(0, 0, 102);">Ahem. Here's one section of both versions...</span>
<table>
<tbody><tr>
<th> Original Version </th>
<th> BushCo Version </th>
</tr>
<tr>
<!-- start of first row definition -->
<td left="" top=""> Sec. 4.2. General Restrictions on Access. (a) A person may have access to classified information provided that:

(1) a favorable determination of eligibility for access has been made by an agency head or the agency head's designee;

(2) the person has signed an approved nondisclosure agreement; and

(3) the person has a need-to-know the information.

(b) Classified information shall remain under the control of the originating agency or its successor in function. An agency shall not disclose information originally classified by another agency without its authorization. An official or employee leaving agency service may not remove classified information from the agency's control.

(c) Classified information may not be removed from official premises without proper authorization.

(d) Persons authorized to disseminate classified information outside the executive branch shall assure the protection of the information in a manner equivalent to that provided within the executive branch.

(e) Consistent with law, directives, and regulation, an agency head or senior agency official shall establish uniform procedures to ensure that automated information systems, including networks and telecommunications systems, that collect, create, communicate, compute, disseminate, process, or store classified information have controls that:

(1) prevent access by unauthorized persons; and

(2) ensure the integrity of the information.

(f) Consistent with law, directives, and regulation, each agency head or senior agency official shall establish controls to ensure that classified information is used, processed, stored, reproduced, transmitted, and destroyed under conditions that provide adequate protection and prevent access by unauthorized persons.

(g) Consistent with directives issued pursuant to this order, an agency shall safeguard foreign government information under standards that provide a degree of protection at least equivalent to that required by the government or international organization of governments that furnished the information. When adequate to achieve equivalency, these standards may be less restrictive than the safeguarding standards that ordinarily apply to United States "Confidential" information, including allowing access to individuals with a need-to-know who have not otherwise been cleared for access to classified information or executed an approved nondisclosure agreement.

(h) Except as provided by statute or directives issued pursuant to this order, classified information originating in one agency may not be disseminated outside any other agency to which it has been made available without the consent of the originating agency. An agency head or senior agency official may waive this requirement for specific information originated within that agency. For purposes of this section, the Department of Defense shall be considered one agency.</td>
<td left="" top=""> Sec. 4.2. Distribution Controls. (a) Each agency shall establish controls over the distribution of classified information to ensure that it is distributed only to organizations or individuals eligible for access and with a need-to-know the information.

(b) In an emergency, when necessary to respond to an imminent threat to life or in defense of the homeland, <span style="font-weight: bold;">the agency head or any designee may authorize the disclosure of classified information to an individual or individuals who are otherwise not eligible for access. </span>Such actions shall be taken only in accordance with the directives implementing this order and any procedures issued by agencies governing the classified information, which shall be designed to minimize the classified information that is disclosed under these circumstances and the number of individuals who receive it. Information disclosed under this provision or implementing directives and procedures shall not be deemed declassified as a result of such disclosure or subsequent use by a recipient. Such disclosures shall be reported promptly to the originator of the classified information. For purposes of this section, <span style="font-weight: bold;">the Director of Central Intelligence may issue an implementing directive governing the emergency disclosure of classified intelligence information.</span>

(c) Each agency shall update, at least annually, the automatic, routine, or recurring distribution of classified information that they distribute. Recipients shall cooperate fully with distributors who are updating distribution lists and shall notify distributors whenever a relevant change in status occurs. </td>
</tr>
<!-- end of first row definition --></tbody></table><span style="font-weight: bold; color: rgb(0, 0, 102);">Now we know how Karl Rove, Scooter Libby, and the WHIG came to have access to Valerie Plame's identity...</span>

[welshTerrier2]

1. try using "valign=top" ...

see if this helps: http://www.htmlcodetutorial.com/tables/_TR_VALIGN.html

[charlie]

2. Apart from the incorrect attributes

welshTerrier2 pointed out, your markup is okay.

The problem is that what you've posted here is not what's online. View the source of the live page and you'll see that your blog publisher has inserted a lot of break tags between the table headers and rows where they don't belong. That's what's causing the gap between the span and the table.

[displacedtexan]

3. Those phantom lines are a major problem with blogger.com

What you see when you're composing is not what you get. Those spaces don't show up in the code.

I'm just stupid when it comes to tables. I understand <tr> and <td>, but I tried to use valign, and it didn't work.

Thanks for replying, though.

I'll keep plodding on.

[youspeakmylanguage]

4. Tables just suck in general. Drop them completely and...

...try using CSS and <div> elements instead.

You'll have cleaner code, a more elegant design, and multiple pages will be much easier to manage.