# html/css tables question

**URL:** <https://boards.straightdope.com/t/html-css-tables-question/151076>\
**Category:** Factual Questions\
**Created:** [January 26, 2003, 7:17pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076 "2003-01-26T19:17:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![raisinbread](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@raisinbread](https://boards.straightdope.com/u/raisinbread)\
**Post date:** [January 26, 2003, 7:17pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/1 "2003-01-26T19:17:34Z")

</div>

Is it possible to make a table in HTML that has a line along one side of the table? For example the left, bottom and right side of the table will have no visible border but the top side will have a 1px #000000 line for its breadth.  
I’m assuming such a beast would be done with style sheets. Will this be rendered correctly by all browsers, save Netscape 4.7\* or would this convention be particular to a single browser like IE?

---

<div class="post-metadata">

**Author:** ![raisinbread](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@raisinbread](https://boards.straightdope.com/u/raisinbread)\
**Post date:** [January 26, 2003, 7:26pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/2 "2003-01-26T19:26:21Z")

</div>

Oh yes, is it possible to add justification to text in HTML or does one have to have ragged line breaks?

---

<div class="post-metadata">

**Author:** ![Armilla](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Armilla](https://boards.straightdope.com/u/Armilla)\
**Post date:** [January 26, 2003, 7:28pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/3 "2003-01-26T19:28:41Z")

</div>

Try something like :

```auto

<table border="0" width="100%" style="border-left:1px solid #000000">

```

Works in IE, but probably not in Netscape (I don’t have 4.7 handy).

A more compatible option might be to insert a 1pixel wide black cell at the left of the table, spanned across the rows.

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [January 26, 2003, 7:29pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/4 "2003-01-26T19:29:03Z")

</div>

In the stylesheet:

```auto

table#foo {
border-top : 1px #000 solid; }

```

In the body:

```auto

<table id="foo" etc...>

```

Now that I think about it, you might have to do it with individual cells. In that case, make it td#foo instead of table#foo, and apply the id property to the cells on the first row of the table.

It should work in IE, Gecko, Opera, and Khtml, afaik.

---

<div class="post-metadata">

**Author:** ![Armilla](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Armilla](https://boards.straightdope.com/u/Armilla)\
**Post date:** [January 26, 2003, 7:33pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/5 "2003-01-26T19:33:40Z")

</div>

You can also justify text with the text-align CSS attribute.

```auto

<span style="text-align:justify>
Justified text in here
</span>

```

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [January 26, 2003, 7:40pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/6 "2003-01-26T19:40:26Z")

</div>

As for justification, theres the text-align : justify; property. You have to use it with block level elements, ie, \<p\>, \<td\>, \<blockquote\>, etc.

It doesn’t work well in Navigator 4, but then again, nothing does.

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [January 26, 2003, 7:42pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/7 "2003-01-26T19:42:58Z")

</div>

> [@](#):
>
> \*Originally posted by Armilla \*  
> \*\*You can also justify text with the text-align CSS attribute.
> 
> ```auto
> 
> <span style="text-align:justify>
> Justified text in here
> </span>
> 
> ```
> 
> \*\*

It won’t work in a span, which is a line level element. You’ll need to use a div.

---

<div class="post-metadata">

**Author:** ![Armilla](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Armilla](https://boards.straightdope.com/u/Armilla)\
**Post date:** [January 26, 2003, 7:46pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/8 "2003-01-26T19:46:17Z")

</div>

> [@](#):
>
> \*Originally posted by black455 \*  
> \*\*It won’t work in a span, which is a line level element. You’ll need to use a div. \*\*

Works for me.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [January 26, 2003, 7:48pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/9 "2003-01-26T19:48:53Z")

</div>

\<table style=“border-width: 1px 0 0 0; border-color: black”\>  
\<tr\>  
\<td style=“text-align: justify”\>  
Jusified text in here.  
\<td\>  
This text inherits its alignment from the parent element.  
\<td style=“text-align: right”\>  
Right-jusified text in here.  
\</table\>

If you want your whole page justified, I suggest making it part of the body tag, and letting everything inherit:

\<body style=“text-align: justify”\>

---

<div class="post-metadata">

**Author:** ![mazzer](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mazzer](https://boards.straightdope.com/u/mazzer)\
**Post date:** [January 26, 2003, 9:14pm UTC](https://boards.straightdope.com/t/html-css-tables-question/151076/10 "2003-01-26T21:14:56Z")

</div>

If you want something more brower-independent, you can go without style sheets altogether.

```auto

<table>
	<tr height="1">
		<td height="1" colspan="3" bgcolor="#000000"></td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

```

You will have to adjust your colspan according to how many columns you have. Not elegant, but that’s how it used to be done.
