Tabel borders: simpel ruitenpatroon komt er niet uit

Status
Niet open voor verdere reacties.
E

evertVB

Gebruiker
Lid geworden
6 apr 2009
Berichten
570
Ik heb deze stylesheet:
Code: 
body        {background-color: #FFFFCC; text-align: center; }
table, td   {font-weight:bold; border:1px double black;}
td          {border-spacing:0px; padding:0px;}
En deze html:
Code: 
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML> 
<HEAD> 
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sudokupresent.css" />
<TITLE>Sudoku presentatie</TITLE> 
</HEAD>
<BODY>
<br/><br/><br/>
<table height="500" width="500" align="center" valign="center" bgcolor=#CCFF99>
<tr><td></td><td></td><td>9</td><td></td><td></td><td></td><td>1</td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td>4</td><td>6</td><td>7</td><td>8</td><td>2</td><td></td></tr>
<tr><td></td><td>7</td><td></td><td>8</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td>7</td><td></td><td>2</td><td></td><td>5</td></tr>
<tr><td>1</td><td>9</td><td></td><td>6</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td>5</td><td>2</td><td></td><td></td><td></td><td>1</td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td>3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td>9</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr><td>3</td><td>1</td><td>4</td><td></td><td></td><td></td><td></td><td>6</td><td/></tr>
</table>
</BODY> 
</HTML>

Problemen;
1. De cel-borders van aanelkaar grenzende cellen zijn apart zichtbaar.
2. De cellen waar geen cijfer in staat hebben geen borders.

Terwijl ik gewoon een simpel doorlopend ruitenpatroon wil.

Hoe krijg ik dit voorelkaar?
 

Bijlagen

Laatst bewerkt:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<link rel="stylesheet" type="text/css" href="sudokupresent.css">
	<TITLE>Homepage Mieke, Evert Jan en Maarten</TITLE>
</HEAD>
<BODY>
<table>
<tr><td></td><td></td><td>9</td><td></td><td></td><td></td><td>1</td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td>4</td><td>6</td><td>7</td><td>8</td><td>2</td><td></td></tr>
<tr><td></td><td>7</td><td></td><td>8</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td>7</td><td></td><td>2</td><td></td><td>5</td></tr>
<tr><td>1</td><td>9</td><td></td><td>6</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td>5</td><td>2</td><td></td><td></td><td></td><td>1</td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td>3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td>9</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr><td>3</td><td>1</td><td>4</td><td></td><td></td><td></td><td></td><td>6</td><td/></tr>
</table>
</BODY>
</HTML>
Code: 
body {background-color: #FFFFCC; text-align: center;}
table {height: 500px; width: 500px; margin: 3.6em auto 0; background: #CCFF99; border-collapse: collapse;}
td {border: black solid 1px;}

Je border-collapse stond verkeerd. Omdat ik om 't te bekijken de opmaak in de css heb gezet, staat dat hier ook zo. Dat houdt je html veel schoner en makkelijker te onderhouden.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan