Tutorial de Formato - Como trabajar las Tablas

in #steemit6 years ago (edited)


Como trabajar las Tablas en Steemit

<div class="text-justify"> <p dir="auto">En Steemit son muy útiles las tablas para presentar información estructurada. En este post vamos a revisar como hacer tablas para que puedas desarrollar artículos visualmente mas elegantes. <p dir="auto">Cuando construyes una tabla en Steemit, las filas y columnas se ajustan automáticamente, por lo tanto es importante que revises el resultado mientras construyes tu post para que garantices con espacios, texto o saltos de linea que la tabla tenga los tamaños que deseas. <p dir="auto">Para hacer una tabla tienes que usar los siguientes caracteres con la siguiente estructura: <p dir="auto"><code>Titulo 1 | Titulo 2 | ... |Titulo n<br /> <code>--------|----------|----------|---------<br /> <code>texto 11 | figura 12 | ... | texto 1n<br /> <code>texto 21 | figura 22 | ... | texto 2n<br /> <code>... | ... | ... | ...<br /> <code>texto n1 | figura n2 | ... | texto nn <hr /> <p dir="auto"><h2>Ejemplos<p> <p dir="auto"><h2>Tabla sencilla de 2 Columnas<br /> <h3>Modo Edición:<br /> <code>Titulo 1 | Titulo 2<br /> <code>--------|----------<br /> <code>texto 11 | figura 12<br /> <code>texto 21 | figura 22<br /> <code>texto n1 | figura n2<p> <p dir="auto"><h3>Resultado<p> <div class="table-responsive"><table> <thead> <tr><th>Titulo 1<th>Titulo 2 <tbody> <tr><td>texto 11<td>figura 12 <tr><td>texto 21<td>figura 22 <tr><td>texto n1<td>figura n2 <hr /> <p dir="auto"><h2>Tabla con formato de 2 Columnas<br /> <h3>Modo Edición:<p> <p dir="auto"><code><center><h2> Titulo 1 </h2></center> |<center> <h2> Titulo 2 </h2></center><br /> <code>--------|----------<br /> <code><h3><b>texto 11</b></h3> |<br><br> figura 12<br><br><br /> <code><h3><em>texto 21</em></h3> | <br><br>figura 22<br><br><br /> <code><h3>texto n1 </h3>| <br><br>figura n2<br><br> <p dir="auto"><h3>Resultado<p> <div class="table-responsive"><table> <thead> <tr><th><center><h2> Titulo 1 <th><center> <h2> Titulo 2 <tbody> <tr><td><h3><b>texto 11<td><br /><br /> figura 12<br /><br /> <tr><td><h3><em>texto 21<td><br /><br />figura 22<br /><br /> <tr><td><h3>texto n1 <td><br /><br />figura n2<br /><br /> <hr /> <p dir="auto"><h2>Tabla con formato y fotografías de 2 Columnas<br /> <h3>Modo Edición:<p> <p dir="auto"><code><center><h2> Figura </h2></center> |<center> <h2> Fuente </h2></center><br /> <code>--------|----------<br /> <code>https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg | https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/<br /> <code>https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg | https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/<br /> <code>https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg| https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/ <p dir="auto"><h3>Resultado<p> <div class="table-responsive"><table> <thead> <tr><th><center><h2> Figura <th><center> <h2> Fuente <tbody> <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/ <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/ <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/ <hr /> <p dir="auto"><h2>Tabla con formato y fotografías de 3 Columnas<br /> <h3>Modo Edición:<p> <p dir="auto"><code><center><h2> Figura </h2></center> |<center> <h2> Fuente </h2></center>| <center> <h2> Descripción </h2></center><br /> <code>--------|----------|------<br /> <code>https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg | https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/ | Ford Mustang Rojo - Modelo Clasico<br /> <code>https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg | https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/ | Cadillac antiguo Color Perla<br /> <code>https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg | https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/ | Ford Mustang Color Negro <p dir="auto"><h3>Resultado<p> <div class="table-responsive"><table> <thead> <tr><th><center><h2> Figura <th><center> <h2> Fuente <th><center> <h2> Descripción <tbody> <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/ford-mustang-v8-67-ford-mustang-2705402/<td>Ford Mustang Rojo - Modelo Clasico <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/auto-car-cadillac-oldtimer-788747/<td>Cadillac antiguo Color Perla <tr><td><span><img src="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg" srcset="https://images.hive.blog/768x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg 1x, https://images.hive.blog/1536x0/https://cdn.pixabay.com/photo/2012/11/02/13/02/ford-63930_960_720.jpg 2x" /><td><span><a href="https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://pixabay.com/en/ford-mustang-auto-vehicle-muscle-63930/<td>Ford Mustang Color Negro <hr /> <h1>Próximamente: <h3> Tutorial de Formato - Como Trabajar Texto con Imágenes
Sort:  

Muy bueno el post. Me ayudo mucho. Gracias


For more information, click here!!!!
Send minimum 0.010 SBD|STEEM to bid for votes.
This post has received a 1.82% upvote from thanks to: @cides.


Do you know, you can also earn daily passive income simply by delegating10SP, 100SP, 500SP, 1000SP or Another amount your Steem Power to @minnowhelper by clicking following links:

Tomaré tus sugerencias para mejorar mis tablas. Buen dato.
Buena vibra.

Gracias por tu comentario. Estoy a la orden para cualquier duda. Suerte

Interesante, gracias por compartir, de seguro lo utilizare en mi próximo articulo