Jose J. Fernández Programador. Desarrollador web y SEO en León

Curso de HTML: formato del texto en HTML 5

Jose J. Fernández

Curso HTML

1. Párrafos: la etiqueta <p>

Para separar párrafos de nuestro texto utilizamos la etiqueta <p>. El propio texto de este artículo está encerrado entre etiquetas <p>. Cuando colocas varios párrafos, automáticamente se separan entre si sin que tú tengas que introducir saltos de línea manuales con la etiqueta <br />, márgenes con CSS ni cosas raras. Un ejemplo:

<p>Párrafo #1</p>
<p>Párrafo #2</p>

Se mostraría así:

Párrafo #1

Párrafo #2

2. Negrita y cursiva: las etiquetas <strong> y <em>

Se trata de etiquetas que nos ayudan a formatear el texto con negrita y cursiva. Llevas viéndolas un tiempo a lo largo de este curso, tanto en algún ejemplo como en el propio contenido. Para negritas, utilizamos elementos strong y para las cursivas, elementos em, de emphasised, o enfatizado.

En la lengua castellana se usan obligatoriamente las cursivas para marcar palabras extranjeras sin adaptar, pero también pueden interesarnos para dar visibilidad a algunos fragmentos de texto. El uso de las negritas es bastante más evidente: las utilizaremos para resaltar aquellas palabras o frases importantes.

3. Enlaces: la etiqueta <a> y el atributo href

Ya hemos visto algunos ejemplos de enlace en el curso, pero volveremos a hablar de ellos. Los enlaces son aquellas partes del texto de una página web que, al pulsar sobre ellos, nos llevan a otro sitio en Internet.

Para colocar enlaces, utilizaremos la etiqueta <a> y el atributo href, tal y como se muestra en el ejemplo:

<a href="http://web.de/destino">Texto cuya pulsación nos lleva al destino del enlace</a>

Normalmente, los enlaces se resaltan en un color distinto, a veces subrayados o con negritas. Estas modificaciones se especifican en una hoja de estilos CSS. Pero como sabes, las veremos en una entrega posterior del curso. Un ejemplo de enlace: mi blog.

4. Contacto y fechas: las etiquetas <address> y <time>

El elemento address es poco intuitivo, ya que no se utiliza para marcar direcciones postales, sino datos de contacto para el documento HTML en el que se inserta. Es decir, no colocaríamos dónde vivimos dentro de la etiqueta <address>, sino que indicaríamos nuestros datos de contacto, como un email, una URL donde dejar comentarios, etc.

No existe un estándar o una forma predefinida para incluir toda esa información, así que probablemente te interesará estructurarla con párrafos dentro de la etiqueta <address>.

El elemento <time> es bastante más sencillo de entender. Como su nombre indica, nos permite delimitar una hora y una fecha. Es ideal para delimitar el momento de publicación de un artículo, y debe hacerse usando alguno de los siguientes formatos:

  • <time>2014-12-31</time>
  • <time>2014-12</time>
  • <time>12-31</time>
  • <time>18:55:47</time>
  • <time>18:55</time>
  • <time>2014-12-31 18:55:47</time>

Te recomiendo revisar la especificación del elemento time para averiguar más acerca de los formatos disponibles.

El atributo datetime

Para esta etiqueta existe un atributo que nos interesa utilizar: datetime, para facilitar la lectura de las fechas a bots. Para indicar toda la información posible en este atributo, se haría así:

  • <time datetime="2014-12-31T18:55:47">2014-12-31 18:55:47</time>

Fíjate en la T que actúa a modo de separador entre la fecha y la hora, y es obligatoria si indicamos la hora.

5. Código: las etiquetas <pre>, <code> y <kbd>

A veces será de interés la posibilidad de mostrar código en una página web. Por ejemplo, para este tutorial es algo fundamental. El código debe aparecer correctamente formateado, y disponemos de varias etiquetas en HTML para conseguirlo.

La etiqueta <pre> la utilizaremos cuando queramos mostrar texto preformateado, de ahí el nombre de la etiqueta. Con texto preformateado nos referimos a texto ya tabulado como, normalmente, el código de programación, que los programadores estructuramos con tabulaciones. En mi blog esta etiqueta se ve así:

if (is_single()) {
	$categories = get_the_category();
	
	// 1 category = show recursion, more = show all, no recursion
	if (count($categories) <= 1) {
		$cat = array_shift($categories);
		$list .= sprintf($template, get_category_link($cat->cat_ID), $cat->cat_name);
	} else {
		foreach ($categories as $cat) { 
			$cat = array_shift($categories);
			$list .= sprintf($template, get_category_link($cat->cat_ID), $cat->cat_name);
		}
	}
	
	$list .= sprintf($template, get_permalink(), get_the_title(get_the_id()));
	
	return sprintf($html, $list);
}

La etiqueta <code> nos interesa utilizarla cuando queramos delimitar algún fragmento de código, como por ejemplo así: $var = new Class();. Para mostrar fragmentos grandes de código, que normalmente estará tabulado, utilizamos <pre>.

Por último, la desconocida etiqueta <kbd>. Proviene de keyboard, teclado en inglés, y se utiliza para delimitar texto introducido por el usuario mediante el teclado. Esto se puede interpretar de muchas maneras, pero puede ser útil para mostrar acciones que el usuario debe realizar con su teclado, como por ejemplo:

  • Copia con Ctrl+C, pega con Ctrl+V

Utilizando las tres disponemos de herramientas suficientes para mostrar código y contenido para usuarios técnicos, como se hace constantemente en este curso y en mi blog :) si te preguntas por qué el código que delimitamos con <pre> no aparece con sus números de línea, con el resaltado de sintaxis y demás… Para ello se requiere utilizar JavaScript, y ahora mismo no lo he implementado en mi blog, pero llegará :)

6. Citas: las etiquetas <cite>, <q> y <blockquote>

Otra parte fundamental de Internet es citar y copiar cosas que otras personas han dicho o escrito. Se hace constantemente y por ello HTML nos facilita varias etiquetas con funciones no muy claramente diferenciadas. Si conocías algunas de ellas en versiones anteriores de HTML, debes saber que su función ha cambiado en HTML 5.

Empezaremos con la etiqueta <cite> que creo que es la más fácil de entender. Sirve para hacer una referencia a otra publicación. Para hacer esta referencia, encerraremos dentro de etiquetas <cite> el nombre de la publicación, o bien un identificador, número u otro tipo de seña de la publicación a la que referenciamos, como por ejemplo el ISBN. Veamos un par de ejemplos:

<cite>La Odisea</cite> fue escrita por Homero
Acabo de encontrar algo sobre la abdicación del Rey, su referencia es <cite>ISBN 13: 978-84-617-0726-3</cite>

Ambos son ejemplos de referencias válidas. No sería válido, por otro lado, englobar en <cite> el nombre del autor.

Con la etiqueta <q> insertaremos en nuestra página citas textuales de otras personas. Es decir, palabras que otras personas han dicho o escrito. Por ejemplo, podríamos hacerlo con el siguiente fragmento en inglés: To be or not to be, that is the question. El HTML que he utilizado es el siguiente:

<q>To be or not to be, that is the question</q>

Si te fijas, no he escrito comillas, pero éstas aparecen automáticamente. Ese es el funcionamiento que se espera de esta etiqueta. No se deben escribir manualmente las comillas dentro de la etiqueta <q>, ya que se incluyen automáticamente.

Por último, la etiqueta <blockquote>;. La utilizaremos cuando queramos citar una sección de texto proveniente de otra fuente. Normalmente esta etiqueta se verá con algún distintivo que indique que es una cita. Un ejemplo de HTML sería el siguiente:

<blockquote>Citando que las vienen dando.</blockquote>

Eso en mi blog se vería así:

Citando que las vienen dando.

¿Cómo diferenciar entre <q> y <blockquote>? Utilizaremos la primera cuando estemos parafraseando o escribiendo en estilo indirecto sobre algo que ha dicho otra persona. Utilizaremos la segunda, en cambio, cuando queramos simplemente mostrar un texto proveniente de otro sitio.

7. Abreviaturas: la etiqueta <abbr>

La etiqueta <abbr> sirve para acrónimos y abreviaturas. Muy sencillo de entender y de utilizar. Conviene también utilizar el atributo title con esta etiqueta, de modo que al pasar el ratón por encima -como se espera que haga el usuario- se vea el significado completo de la abreviatura. Veamos un ejemplo:

<abbr title="Jose J. Fernández">JJF</abbr>

Si mostramos lo anterior: JJF

Si tu primer impulso ha sido pasar el ratón por encima, lo mismo harán los visitantes de tu sitio web. Por lo tanto conviene utilizarlo en la medida de lo posible para aclarar el significado de siglas, acrónimos o abreviaturas en nuestro sitio web.

También es posible utilizarlo junto con un enlace, de la siguiente forma:

<abbr title="Jose J. Fernández"><a href="http://josejfernandez.com">JJF</a></abbr>

Resultado: JJF

8. Subíndice y superíndice: las etiquetas <sub> y <sup>

Utilizaremos estas etiquetas para marcar texto que debe ir como subíndice o superíndice. ¿Y cuándo es eso? Superíndice para las potencias (dos elevado a tres), subíndice para los elementos químicos (dióxido de carbono), entre otros usos. Ejemplos:

Potencia: 23
Química: CO2

HTML:

Potencia: 2<sup>3</sup>
Química: CO<sub>2</sub>

9. Listados

Las listas son una de las características más útiles y más comúnmente utilizadas en HTML. Normalmente las listas se presentan como elementos separados verticalmente, pero también pueden modificarse, mediante CSS, para mostrarse horizontalmente y sin el indicador de elemento de la lista, que suele ser un círculo colocado a la izquierda de cada elemento.

Existen varios tipos de listas: ordenadas, desordenadas y listas de definición, que veremos explicados en varios subapartados a partir de aquí.

9.1 Listas ordenadas: las etiquetas <ol> y <li>

Las listas ordenadas muestran elementos numerados en varios formatos. Se inician con la etiqueta <ol>, dentro de la cual podemos colocar tantos elementos, marcados con la etiqueta <li>, como queramos. Un ejemplo sencillo podría ser un listado de películas favoritas:

<ol>
<li>Star Wars</li>
<li>Lo que el viento se llevó</li>
<li>El Padrino</li>
<li>Los cazafantasmas</li>
<li>Titanic</li>
</ol>

Esto daría como resultado:

  1. Star Wars
  2. Lo que el viento se llevó
  3. El Padrino
  4. Los cazafantasmas
  5. Titanic

Es posible alterar el formato del listado mediante atributos, por ejemplo mediante type para cambiar si se numera con números decimales (1, 2, 3…), números romanos (I, II, III…) o letras (a, b, c…), y con start para indicar el primer número de la lista. Veamos varios ejemplos:

Números romanos

<ol type="I">
<li>Star Wars</li>
<li>Lo que el viento se llevó</li>
<li>El Padrino</li>
<li>Los cazafantasmas</li>
<li>Titanic</li>
</ol>
  1. Star Wars
  2. Lo que el viento se llevó
  3. El Padrino
  4. Los cazafantasmas
  5. Titanic

Letras

<ol type="a">
<li>Star Wars</li>
<li>Lo que el viento se llevó</li>
<li>El Padrino</li>
<li>Los cazafantasmas</li>
<li>Titanic</li>
</ol>
  1. Star Wars
  2. Lo que el viento se llevó
  3. El Padrino
  4. Los cazafantasmas
  5. Titanic

Fíjate en que si utilizas una “a” mayúscula, las letras que numeran la lista son mayúsculas, mientras que en el ejemplo de los números romanos, podríamos haber utilizado una “i” minúscula para que los números romanos se presentaran en minúsculas.

Cambiando el número de inicio de la lista

Es posible indicar, mediante el atributo start, en qué número tiene que empezar la lista ordenada. Puede ser útil si partimos una lista en varias partes.

<ol start="7">
<li>Star Wars</li>
<li>Lo que el viento se llevó</li>
<li>El Padrino</li>
<li>Los cazafantasmas</li>
<li>Titanic</li>
</ol>
  1. Star Wars
  2. Lo que el viento se llevó
  3. El Padrino
  4. Los cazafantasmas
  5. Titanic

9.2 Listas desordenadas: la etiqueta <ul> y <li>

Las listas desordenadas se crean exactamente igual que las listas ordenadas, pero utilizando la etiqueta <ul>:

<ul>
<li>Star Wars</li>
<li>Lo que el viento se llevó</li>
<li>El Padrino</li>
<li>Los cazafantasmas</li>
<li>Titanic</li>
</ul>
  • Star Wars
  • Lo que el viento se llevó
  • El Padrino
  • Los cazafantasmas
  • Titanic

Como supondrás, no tiene sentido utilizar los parámetros type ni start para modificar el formato de estas listas.

9.3 Listas de definición: las etiquetas <dl>, <dt> y <dd>

Se utilizan mucho menos a menudo que los otros tipos de listas. El estándar dice que debemos utilizarlas cuando queramos definir, explicar o describir palabras, términos o conceptos, entre otros. Vamos a ver algunos ejemplos:

  • Para definir palabras o términos, como un diccionario
  • Para especificar detalles, como una lista de tareas
  • Para indicar metadatos, como la fecha de publicación, última edición, autor…

Vamos a crear una lista de definición para cada una de las etiquetas que utilizan las listas de definición :)

<dl>
Utilizamos esta etiqueta para iniciar y cerrar la lista de definición.
Puede contener varias “definiciones”.
<dt>
Se utiliza para marcar cada término, concepto o idea que queramos definir.
<dd>
La utilizamos para enmarcar cada una de las definiciones, descripciones o detalles que queramos dar sobre el elemento dt que la precede.
Cada conjunto de <dt> y las <dd> que lo suceden se llama “grupo”

Y éste es el código que da lugar a ese bloque de lista:

<dl>
	<dt>&lt;dl&gt;</dt>
		<dd>Utilizamos esta etiqueta para iniciar y cerrar la lista de definición.</li>
		<dd>Puede contener varias "definiciones".</dd>
	<dt>&lt;dt&gt;</dt>
		<dd>Se utiliza para marcar cada término, concepto o idea que queramos definir.</dd>
	<dt>&lt;dd&gt;</dt>
		<dd>La utilizamos para enmarcar cada una de las definiciones, descripciones o detalles que queramos dar sobre el elemento dt que la precede.</dd>
		<dd>Cada conjunto de &lt;dt&gt; y las &lt;dd&gt; que lo suceden se llama "grupo"</dd>
</dl>

No olvides que la forma en que ves la lista (con el fondo gris, con un borde, con una letra un poco más pequeña) es sólo gracias al CSS que se le aplica. Por defecto, una lista de definición no tiene ningún estilo adicional, más allá de un margen a la izquierda de cada definición (etiqueta <dd>).

9.4 Listas anidadas

Hemos visto los distintos tipos de listas que hay, pero hemos obviado una potente cualidad de las mismas: la capacidad de incluir listas dentro de listas. Veamos un ejemplo con bastantes listas anidadas, para que veas la complejidad que se puede llegar a alcanzar:

  • Inicio
  • Artículos
    • Programación
    • Hardware
    • HTML
  • Sobre mi
    • Mis películas favoritas
      1. Star Wars
        1. La venganza de los Sith
        2. La amenaza fantasma
        3. El retorno del Jedi
      2. El Padrino
      3. 300
    • Mis cualidades
      Informático
      Escribo programas

      1. Con lenguajes interpretados
        • PHP
        • Python
        • Perl
      2. Con lenguajes compilados
        • C++
        • COBOL
      3. Con lenguajes intermedios
        • Java
        • C#
      Hago páginas web y creo tiendas online.

      • Uso diseño responsive
      • Uso flat design
      • Contemplo accesibilidad
      • Y usabilidad
      Configuro y mantengo infraestructuras de soporte a organizaciones.
      Profesor
      Doy clases a personas sobre informática.
      Ayudo a preparar exámenes de acceso.

El código que da lugar a esa lista es el siguiente:

<ul>
	<li>Inicio</li>
	<li>Artículos
		<ul>
			<li>Programación</li>
			<li>Hardware</li>
			<li>HTML</li>
		</ul>
	</li>
	<li>Sobre mi
		<ul>
			<li>Mis películas favoritas
				<ol>
					<li>Star Wars
						<ol>
							<li>La venganza de los Sith</li>
							<li>La amenaza fantasma</li>
							<li>El retorno del Jedi</li>
						</ol>
					</li>
					<li>El Padrino</li>
					<li>300</li>
				</ol>
			</li>
			<li>Mis cualidades
				<dl>
					<dt>Informático</dt>
						<dd>Escribo programas
							<ol>
								<li>Con lenguajes interpretados
									<ul>
										<li>PHP</li>
										<li>Python</li>
										<li>Perl</li>
									</ul>
								</li>
								<li>Con lenguajes compilados
									<ul>
										<li>C++</li>
										<li>COBOL</li>
									</ul>
								</li>
								<li>Con lenguajes intermedios
									<ul>
										<li>Java</li>
										<li>C#</li>
									</ul>
								</li>
							</ol>
						</dd>
						<dd>Hago páginas web y creo tiendas online.
							<ul>
								<li>Uso diseño responsive</li>
								<li>Uso flat design</li>
								<li>Contemplo accesibilidad</li>
								<li>Y usabilidad</li>
							</ul>
						</dd>
						<dd>Configuro y mantengo infraestructuras de soporte a organizaciones.</dd>
					<dt>Profesor</dt>
						<dd>Doy clases a personas sobre informática.</dd>
						<dd>Ayudo a preparar exámenes de acceso.</dd>
				</dl>
			</li>
		</ul>
	</li>
</ul>

10. Tablas

Las tablas son una potente, aunque compleja, característica de HTML que nos permite mostrar datos en formato tabulado. Son ideales para cosas como fichas técnicas, facturas o datos en general. Veamos a continuación cuáles son las etiquetas que nos permiten mostrar tablas, que no son pocas.

10.1 La etiqueta <table>

Con esta etiqueta definimos una tabla. Por si sola no es útil, puesto que una tabla tendrá filas y columnas y estos elementos los definiremos con las etiquetas que veremos a continuación, pero es necesario utilizarla.

10.2 Filas en una tabla: las etiquetas <tr> y <td>

Las tablas en HTML funcionan definiendo filas (horizontal) y dentro de cada una, celdas o columnas (vertical). En otras palabras, que las celdas (<td>) van a ir dentro de las filas (<tr>). Vamos a definir una tabla muy básica para ver cómo construye nuestro navegador el HTML:

<table>
	<tr>
		<td>Celda 1,1</td>
		<td>Celda 1,2</td>
		<td>Celda 1,3</td>
	</tr>
	<tr>
		<td>Celda 2,1</td>
		<td>Celda 2,2</td>
		<td>Celda 2,3</td>
	</tr>
</table>

Esto daría como resultado:

Celda 1,1 Celda 1,2 Celda 1,3
Celda 2,1 Celda 2,2 Celda 2,3

Hay una pequeña restricción que por el momento no puedes evitar: las filas deben tener todas el mismo número de celdas/columnas. Si no lo haces puede que la tabla se muestre mal, o que deforme el resto de la página. Para añadir columnas, simplemente añadimos etiquetas <td> en ambas filas:

<table>
	<tr>
		<td>Celda 1,1</td>
		<td>Celda 1,2</td>
		<td>Celda 1,3</td>
		<td>NUEVA (1,4)</td>
	</tr>
	<tr>
		<td>Celda 2,1</td>
		<td>Celda 2,2</td>
		<td>Celda 2,3</td>
		<td>NUEVA (2,4)</td>
	</tr>
</table>

El resultado sería:

Celda 1,1 Celda 1,2 Celda 1,3 NUEVA (1,4)
Celda 2,1 Celda 2,2 Celda 2,3 NUEVA (2,4)

10.3 Cabecero de la tabla: las etiquetas <thead> y <th>

Si has llegado hasta aquí ya sabes construir tablas simples que sirven para el 90% de las situaciones, pero eso no quiere decir que HTML no ofrezca más posibilidades. Veamos un par de mejoras sobre lo que tenemos hasta ahora.

El cabecero de la tabla es una zona que quedará siempre a la vista a la hora de imprimir la tabla, aunque ésta ocupe más de una página. Es decir, se imprimirá siempre -una vez por página-, para facilitar la lectura. En algunas páginas web, mediante CSS se hace que el cabecero esté siempre visible aunque hagamos scroll hacia abajo.

Dentro del cabecero podemos indicar filas y celdas, tanto normales como de un nuevo tipo: celdas “cabecero”. Para definir estas celdas, en lugar de utilizar <td> vamos a utilizar <th>.

Ampliemos el ejemplo anterior con estos nuevos conceptos:

<table>
	<thead>
		<tr>
			<th>Columna 1</th>
			<th>Columna 2</th>
			<th>Columna 3</th>
			<th>Columna 4</th>
		</tr>
	</thead>
	<tr>
		<td>Celda 1,1</td>
		<td>Celda 1,2</td>
		<td>Celda 1,3</td>
		<td>NUEVA (1,4)</td>
	</tr>
	<tr>
		<td>Celda 2,1</td>
		<td>Celda 2,2</td>
		<td>Celda 2,3</td>
		<td>NUEVA (2,4)</td>
	</tr>
</table>

El resultado sería:

Columna 1 Columna 2 Columna 3 Columna 4
Celda 1,1 Celda 1,2 Celda 1,3 NUEVA (1,4)
Celda 2,1 Celda 2,2 Celda 2,3 NUEVA (2,4)

Aunque en tablas así de pequeñas no es de especial utilidad, es muy interesante cuando trabajamos con tablas grandes que no caben en pantalla o en una hoja. Otra cosa que podemos hacer es incluir un <th> en cada fila (<tr>) para que sea el cabecero de dicha la fila. Veamos otro ejemplo:

<table>
	<thead>
		<tr>
			<th scope="col">Empresa</th>
			<th scope="col">Empleados</th>
			<th scope="col">Valor</th>
		</tr>
	</thead>
	<tr>
		<th scope="row">Google</th>
		<td>100.000</td>
		<td>US $1.700.550.000</td>
	</tr>
	<tr>
		<th scope="row">Microsoft</th>
		<td>90.000</td>
		<td>US $1.000.000.000</td>
	</tr>
</table>

El código se mostraría así:

Empresa Empleados Valor
Google 100.000 US $1.700.550.000
Microsoft 90.000 US $1.000.000.000

Fíjate en que estamos utilizando el atributo scope. scope significa ámbito, y en este caso indica el ámbito en el que la celda es cabecero: si es cabecero de la columna (valor: col) o si es cabecero de la fila (valor: row).

10.4 Pie de la tabla: la etiqueta <tfoot>

El pie de tabla cumple con la misma función que el cabecero, pero en algunos casos puede que sea de interés incluirlo. Se me ocurre el siguiente ejemplo:

Empresa Empleados Valor
Hombres Mujeres
Empresa Hombres Mujeres Valor
Empleados
Google 80.000 20.000 US $1.700.550.000
Microsoft 40.000 50.000 US $1.000.000.000

Se podría mejorar el estilo y la presentación, pero seguro que captas la idea de por qué a veces puede ser interesante incluir un <tfoot>, ¿no? Dejando a un lado, por supuesto, los casos en los que la tabla es tan grande que es más cómodo bajar hasta el <tfoot> que volver a subir al <thead>.

Dos apuntes sobre el <tfoot>:

  1. Se coloca debajo del <thead>, y encima del <tbody>, que veremos a continuación.
  2. Al igual que el <thead>, sólo puede haber uno.

El código que genera la tabla anterior es el siguiente:

<table>
	<thead>
		<tr>
			<th scope="col" rowspan="2">Empresa</th>
			<th scope="col" colspan="2">Empleados</th>
			<th scope="col" rowspan="2">Valor</th>
		</tr>
		<tr>
			<th scope="col">Hombres</th>
			<th scope="col">Mujeres</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="col" rowspan="2">Empresa</th>
			<th scope="col">Hombres</th>
			<th scope="col">Mujeres</th>
			<th scope="col" rowspan="2">Valor</th>
		</tr>
		<tr>
			<th scope="col" colspan="2">Empleados</th>
		</tr>
	</tfoot>
	<tr>
		<th scope="row">Google</th>
		<td>80.000</td>
		<td>20.000</td>
		<td>US $1.700.550.000</td>
	</tr>
	<tr>
		<th scope="row">Microsoft</th>
		<td>40.000</td>
		<td>50.000</td>
		<td>US $1.000.000.000</td>
	</tr>
</table>

10.5 Cuerpo de la tabla: la etiqueta <tbody>

El contenido de nuestra tabla lo podemos colocar dentro de un <tbody> (que tendrá sus filas) o fuera de él, justo debajo del <tfoot> si lo hubiera. Puede haber varios <tbody>.

Su utilización, si has dominado el <thead> y el <tfoot>, no entraña secreto alguno:

<table>
	<thead>
		<tr>
			<th scope="col">Empresa</th>
			<th scope="col">Empleados</th>
			<th scope="col">Valor</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Google</th>
			<td>100.000</td>
			<td>US $1.700.550.000</td>
		</tr>
		<tr>
			<th scope="row">Microsoft</th>
			<td>90.000</td>
			<td>US $1.000.000.000</td>
		</tr>
	</tbody>
</table>

El resultado sería:

Empresa Empleados Valor
Google 100.000 US $1.700.550.000
Microsoft 90.000 US $1.000.000.000

En el caso de que quisieras incluir varios <tbody>:

<table>
	<thead>
		<tr>
			<th scope="col">Empresa</th>
			<th scope="col">Empleados</th>
			<th scope="col">Valor</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Google</th>
			<td>100.000</td>
			<td>US $1.700.550.000</td>
		</tr>
		<tr>
			<th scope="row">Microsoft</th>
			<td>90.000</td>
			<td>US $1.000.000.000</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="row">McDonald's</th>
			<td>200.000</td>
			<td>US $800.000.000</td>
		</tr>
	</tbody>
</table>

Eso daría como resultado:

Empresa Empleados Valor
Google 100.000 US $1.700.550.000
Microsoft 90.000 US $1.000.000.000
McDonald’s 200.000 US $800.000.000

Como ves no cambia nada, pero se podría utilizar para modificar la apariencia de la tabla creando varios grupos de datos, eliminando las líneas entre las filas e incluyendo líneas sólo entre tbody, por ejemplo. Esto lo dejamos para el curso de CSS.

10.6 Alterando la forma de las celdas: los atributos colspan y rowspan

En algunos casos podrá interesarnos que una celda ocupe el lugar de dos. En una hoja de cálculo (Excel, Calc de LibreOffice, etc) esto lo haríamos en “unir celdas”, ¿recuerdas? Podemos hacer que una celda ocupe tantas como queramos, tanto vertical como horizontalmente, y también ambas simultáneamente.

Son los atributos colspan y rowspan, que se aplican sobre las etiquetas <td> o <th>:

<td colspan="2">Esta celda ocupa dos columnas</td>
<td rowspan="2">Esta celda ocupa dos filas</td>

Cuando los aplicamos estamos diciendo cuántos espacios queremos que tome la celda con respecto de las otras celdas que haya a su alrededor. Es decir, no le decimos “tienes que medir 200 píxeles”, sino “tienes que ocupar lo mismo que ocupan las 2 celdas que tienes a tu derecha”, reemplazando 2 con la cantidad que sea, y derecha con la dirección donde haya celdas.

El número de filas y columnas siempre tiene que quedar invariable después de aplicar estos atributos. Si tenemos 3 columnas y en una celda aplicamos colspan="2", tenemos que quitar una columna de esa fila, porque ahora esa celda ocupa dos columnas.

Si utilizamos rowspan es más lioso, porque tenemos que quitar una celda de la fila siguiente. O de las dos siguientes si usamos rowspan="3", o de las tres siguientes con rowspan="4"

Veamos un ejemplo con los dos atributos:

1.1 1.2 1.3 1.4
2.1 2.2 2.4
3.1 3.4
4.1 4.2 4.3 4.4

He numerado las celdas para que veas más fácilmente qué ha sucedido. La celda 2.2 tiene colspan="2" y rowspan="2". Te darás cuenta de que la celda 2.2 ahora ocupa su lugar y el de la 2.3 porque le he puesto colspan="2", pero también ocupa los lugares de las celdas 3.2 y 3.3, porque ocupa dos columnas, pero también dos filas debido a que tiene rowspan="2".

Este es el código de esa tabla:

<table>
	<tr>
		<td>1.1</td>
		<td>1.2</td>
		<td>1.3</td>
		<td>1.4</td>
	</tr>
	<tr>
		<td>2.1</td>
		<td colspan="2" rowspan="2">2.2</td>
		<td>2.4</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.4</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td>4.4</td>
	</tr>
</table>

Fíjate en que he tenido que eliminar las celdas que ahora están ocupadas por la 2.2 porque de no hacerlo la tabla se mostraría mal. Te dejo que pruebes eso por tu cuenta…

11. Texto y CSS: la etiqueta <span> y los atributos class y style

Para terminar hoy, veremos algo muy sencillo que se complicará cuando veamos CSS. Hasta ahora hemos visto multitud de etiquetas distintas, algunas que tenían comportamiento de tipo bloque (salto de línea antes y después), como la etiqueta <p> o la etiqueta <div>, y otras que tenían comportamiento inline o “en línea” (es decir, sin salto de línea), como la etiqueta <strong>.

La mayoría de etiquetas de tipo inline llevan asociada información de estilo, como es el caso de la mencionada etiqueta <strong>. ¿Y si quisiéramos personalizar un trozo de texto, de una forma que no existiera en ninguna de las etiquetas que hemos visto? Tendremos que recurrir a CSS.

¿Cómo aplicamos ese CSS al HTML? De dos formas:

  1. Atributo style
  2. Atributo class

Podemos aplicar el atributo style a prácticamente todo -creo que no existe ninguna etiqueta que no acepte ese atributo-, incluyendo la etiqueta <span>, que no aporta ninguna información de estilo más allá de la que incluyamos nosotros en los atributos mencionados.

Es decir: que utilizaremos <div> cuando queramos dar estilo a una porción de texto.

Dejaremos para el curso de CSS el atributo class, pero el de style vamos a utilizarlo ahora mismo con un ejemplo sencillo:

Esto es texto normal, pero <span style="color: red;">esto está rojo</span>, definido mediante CSS.

El resultado es:

Esto es texto normal, pero esto está rojo, definido mediante CSS.

¿Qué estilos puedes aplicar? Todos los que te permita CSS, que no es poco. Pero eso, como digo, lo vamos a dejar para el siguiente curso :)

Samus 2014-06-29 - 05:21

Impaciente para ver más contenido y nuevas entregas, muy interesante. Good job, Jose, go on :)

Un saludo!

Damián Lores 2014-07-30 - 17:51

Pues ya me he puesto al día. No pensé que se me haría tan ameno asimilar todo esto. Incluso estoy ansioso por aprender más :)

Samus 2014-10-04 - 16:57

¿Cómo estás, Jose? ¿Le vas a dar continuidad al proyecto? Aquí somos bastantes los que estamos impacientes por nuevo contenido, tanto del curso de HTML, como de un curso de lenguaje alternativo, como de simples actualizaciones del blog!

Un saludo!

Jose J. Fernández 2014-10-05 - 14:52

Hola Samus,

Por supuesto que tendrá continuidad :) pero sucede que desde hace un par de meses he estado más ocupado que de costumbre. Me acabo de poner con esta entrega del curso, que ya casi está acabada ;) a ver si saco más ratos (me lo he propuesto) y sigue esto adelante.

¿Qué lenguajes tienes/tenéis en mente? Tengo un curso de CSS 3 planeado, y otro de PHP.

Samus 2014-10-05 - 21:10

Muchas gracias por el nuevo contenido!

Yo el lenguaje que tenía pensado era CSS, pienso que es el mejor complemento a este curso de HTML. Por supuesto, PHP también sería un lenguaje muy útil, aunque personalmente por lo que hace PHP me conformo con los posts que vas publicando como éste último, realmente interesante sin ser un curso completo.

Ánimo y adelante!

Saludos.

Damián Lores 2014-10-12 - 22:15

Todo lo que tienes planeado me parece perfecto, ya tengo ganas de nuevo contenido jeje.

Carlos Ormeño 2014-11-07 - 09:33

Me quedé con las ganas leer el de CSS, pero al parecer aún no lo has publicado, espero que lo hagas pronto :D Saludos!

José Luis 2015-02-03 - 21:49

hola Jose,

Para cuando crees que será la siguiente clase de html?

Estoy aprendiendo a bien ritmo y sinceramente creo que aportas contenido de muchísima calidad, explicado de una forma clara y concisa

Gracias

Juan 2015-09-16 - 23:05

Espero que pronto pongas mas contenido de CSS.

RACSO 2017-12-12 - 01:04

GRACIAS….entendí muchos aspectos…..cuando sale CSS3 ???….TE agradecere que publiques ya. estoy comenzando de cero, en el maqueteado del wireframe no explicas como se pone las dimensiones de las cajas y colores, etc…..supongo lo haces en CSS, NUEVAMENTE GRACIAS.

  1. Curso de HTML: maquetación semántica de una página en HTML 5 | Jose J. Fernández
  2. Escribir en un blog como un profesional. Tutorial+libro gratis • Luis LAR.es

No se mostrará públicamente.

Un enlace a tu blog o página web.