Duda con un tutorial de códigos [Resuelto]

¡Buenas!

Me preguntaba si alguien me podría ayudar con un tutorial de códigos que estoy realizando, más específicamente este. No sé qué error debe tener el código, pero hay una parte que se me descoloca y no consigo solucionarlo

Aquí dejo cómo me aparece:

Spoiler:

Aquí dejo el código:

Código:

<style>.b1 { width: 500px; height: 150px; background: url(http://68.media.tumblr.com/ef30003060f39a21e7929627f50ba26e/tumblr_nqtplqy2no1roqbjto1_500.jpg) 50%;} .b2 { background: url(http://68.media.tumblr.com/45c448f87bc1be53bf5ae9423fd2ed5a/tumblr_ofd5h3iJOR1u44h2co1_500.png) 50%; width: 250px; height: 150px; }.Tete { width: 200px; height: 25px; background: #000; border: 25px solid #000; color: #fff; padding: 50px 0px; line-height: 20px; text-align: center; font-family: montserrat; font-size: 30px; letter-spacing: -2px; }</style>

<table><tbody><tr><td><div class="b1"></div></td><tr><td><div class="Tete">Remember <br/>[size=16]your words[/size]</div></td><td><div class="b2"></div></td></tr></tbody></table>

Muchas gracias de antemano de parte de una novata

Código:

<style>.b1 { width: 500px; height: 150px; background: url(http://68.media.tumblr.com/ef30003060f39a21e7929627f50ba26e/tumblr_nqtplqy2no1roqbjto1_500.jpg) 50%;} .b2 { background: url(http://68.media.tumblr.com/45c448f87bc1be53bf5ae9423fd2ed5a/tumblr_ofd5h3iJOR1u44h2co1_500.png) 50%; width: 250px; height: 150px; }.Tete { width: 200px; height: 25px; background: #000; border: 25px solid #000; color: #fff; padding: 50px 0px; line-height: 20px; text-align: center; font-family: montserrat; font-size: 30px; letter-spacing: -2px; }</style>

<table><tbody><tr><td colspan="2"><div class="b1"></div></td></tr><tr><td><div class="Tete">Remember <br/>[size=16]your words[/size]</div></td><td><div class="b2"></div></td></tr></tbody></table>

Ahí te lo dejé corregido guapa. Pero te explico qué sucedía, ya que había dos errores.
El primero. Si te fijás en tu código, vas a ver que en tu código hay solo dos "tr". Lo cual estaría bien, pero los dos que hay son etiquetas de apertura.
Aparecen así:

Código:

<tr>Otro contenido que pusiste<tr>

Eso es incorrecto, esto es correcto:

Código:

<tr>Otro contenido que pusiste</tr>

¿Ves? La baliza que abre y la que cierra, siempre.
Una sola columna y dos filas:

Código:

<table><tr><td>Espacio 1</td><td>Espacio1</t2></tr></table>

Dos columnas y cuatro filas:

Código:

<table>
<tr><td>Espacio 1</td><td>Espacio1</td></tr>
<tr><td>Espacio 1</td><td>Espacio1</td></tr>
</table>


¿Vas viendo más o menos cómo es la estructura?

Ahora bien, vos estas haciendo algo que requiere "un paso más allá". Creo que en el tuto no aparece, porque la verdad es mucho lío. Tal vez Ross haga una "segunda parte".

Yo te muestro cómo se ve tu código "desnudo":

Espacio 1
Espacio 2	Espacio 3

Código:

<table border="1">
<tr><td>Espacio 1</td></tr>
<tr><td>Espacio 2</td><td>Espacio 3</td></tr>
</table>

Lo que ahí sucede, es que queda una "casilla fantasma". Porque el código no está bien formulado. Vos lo que querés hacer, es fusionar las dos casillas de la primera fila y para eso, tenés que dejar el code así:
1. Agregás a la casilla un «colspan="2"»

Código:

<table border="1">
<tr><td colspan="2">Espacio 1</td><td>Espacio 2</td></tr>
<tr><td>Espacio 3</td><td>Espacio 4</td></tr>
</table>

2. Y ahora retirás la segunda casilla, porque ya las fusionaste, entonces ya no existe(?).

Código:

<table border="1">
<tr><td colspan="2">Espacio 1</td></tr>
<tr><td>Espacio 3</td><td>Espacio 4</td></tr>
</table>

Y nos queda:

Espacio 1
Espacio 3	Espacio 4

Código:

<table border="1">
<tr><td colspan="2">Espacio 1</td></tr>
<tr><td>Espacio 3</td><td>Espacio 4</td></tr>
</table>

Perfección pura(??). Bueno, de todos modos ya te di tu código corregido ; ) Pero te dejo la explicación por si acaso (Y).

¡Muchísimas gracias por tu ayuda! Lo del cierre del tr se me pasó por completo :v

En cuanto a la fusión de casillas no tenía ni idea que existía un código para hacerlo, así que muchas gracias <3