How to center the divider line in an HTML table?

Question

I have an HTML Table that is not being displayed properly. Here is a picture of the issue:

My issue is that the divider between "Current Number of cars is" and "current number of family members is" is not centered in between the two buttons. How can I go about centering this?

I have tried adding spaces after the "Current number of cars is" by doing the following:

<TD ALIGN="center"><p id="t_4"><pre> Curent Number of Cars is          </pre><p id="t_red">6</p></p></TD>

but this changes the font on my text.

Here is the page source

<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="/edartcss/edart_style.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/button.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/CalendarControl.css" TYPE="text/css">
<TITLE>eDART Generation Tickets</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Refresh" CONTENT="30;URL=/edartsql/john_package.loadpage">
<SCRIPT language="JavaScript" src="/edartjs/geneneration.js"></SCRIPT>
<SCRIPT language="JavaScript" src="/edartjs/CalendarControl.js"></SCRIPT>
</HEAD>
<body OnLoad="placeFocus()">
<TITLE>August Vehicle Directory</TITLE>
<TABLE  border=1 align=center>
<TR>
<TD ALIGN="center" COLSPAN="5"><p id="t_1">August Family Vehicle Listing Directory</p></TD>
</TR>
<TR>
 <TD ALIGN="center" COLSPAN="11"><p id="t_msg">This page lists all of the vehicles and their owners within the August family. 
            Please see the table below for the latest listing.</p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE  border>
<TR>
<TD ALIGN="center"><p id="t_b">Owner</p></TD>
<TD ALIGN="center"><p id="t_b">Make</p></TD>
<TD ALIGN="center"><p id="t_b">Model</p></TD>
<TD ALIGN="center"><p id="t_b">Year</p></TD>
<TD ALIGN="center"><p id="t_b">Additional Specs</p></TD>
</TR>
<TR>
<TD ALIGN="center"><p id="t_i">John, August</p></TD>
<TD ALIGN="center"><p id="t_i">Honda</p></TD>
<TD ALIGN="center"><p id="t_i">Civic</p></TD>
<TD ALIGN="center"><p id="t_i">2012</p></TD>
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_car">Vehicle  Details</a></div></TD>
</TR>
</TABLE>
</td>
</TR>
<TR>
<TD ALIGN="center"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE >
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_car">Add      Vehicle</a></div></TD>
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_family_member">Add Member</a></div></TD>
</TABLE>
</td>
</TR>
</TABLE>
</BODY>
</HTML>

You should learn about HTML and CSS first, I mean seriously you should. — Mr. Alien, Apr 27 '16 at 18:56
`id`'s should be unique and please refactor your uppercase's — Black Sheep, Apr 27 '16 at 18:57
As a piece of advice, provide a runnable piece of code that people can easily edit and test when you want them to help with your code. Like jsfiddle. At least save them the trouble of setting it all up for you. Also, provide the minimum required example, not the entire html. Mind you, this is text book example of the old "using tables for layout" antipattern: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Ernesto, Apr 27 '16 at 19:17

Mark Hkr · Accepted Answer · 2016-04-27T19:03:54.310

3

Add style="width:50%;" to the elements. Here is an example: http://codepen.io/markhkr/pen/XdxbrP

<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>

edited Apr 27 '16 at 19:03

answered Apr 27 '16 at 18:57

Mark Hkr

620
2
7
15

1

`style="width:50%;"`, the width attribute is deprecated: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) – neilsimp1 Apr 27 '16 at 19:00
True, I already changed it. Thanks. – Mark Hkr Apr 27 '16 at 19:02
Adding width = 50% to the attributes was what I needed. Thank you. – Hooplator15 Apr 27 '16 at 19:11

score 3 · Answer 2 · answered Apr 27 '16 at 18:59

3

You can add a columns attribute to the table to specify the widths at 50% each line so:

<table columns="50%,50%">

But be aware that using tables for this kind of layout is considered passée. Generally you would have each of the side-by-side elements as floating <div>s with a 50% width.

answered Apr 27 '16 at 18:59

Kyle Sletten

5,365
2
26
39

What an awesome use of the word "passee" haha :-) – Martin Apr 27 '16 at 19:01

score 0 · Answer 3 · answered Apr 27 '16 at 19:04

0

Give "cars" an id of left, and "family members" an id of right.

Set the with of each id to 50%, and use text-align: center.

answered Apr 27 '16 at 19:04

Nick Tirrell

441
2
13

How to center the divider line in an HTML table?

3 Answers3