Working with Tables in a Node

You can add tables to your pages. Please consider mobile viewing when creating tables.

Basic setup of a table

  • Start with a <div> tag to indicate that a table starts
  • Add the <table> tag
  • Add a header <thead>
  • Add the content for the header row
  • Close the header </thead>
  • Add the body tag <tbody>
  • Add as many rows as you like
  • Close body, table and div

To create a nice looking table from a Google-Sheet

You can use this template

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Code

<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr class="bg-warning text-white">
<td ><b>Firstname</b></td>
<td><b>Lastname</b></td>
<td><b>Email</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

No header? No problem.

Simply remove the entire header block

John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Code

<div class="table-responsive">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

Lists

A

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

B

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

B

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Code

<div class="table-responsive">
<table class="table table-striped table-bordered">

<tbody>

<tr>
<td><h1>A</h1></td>
<td><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></td>
</tr>

<tr>
<td><h1>B</h1></td>
<td><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></td>
</tr>

<tr>
<td><h1>B</h1></td>
<td><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></td>
</tr>

</tbody>
</table>
</div>

Set the width of your columns

There are two ways of manually setting the width of your columns - if you don't chose on form - the width is set automatically.

Option 1: Set the width with percentage (also an example with a two part column and the bold tag)

Image Missing Get. It. Done
We focus on getting things done. We focus on what is most relevant. We joyfully ignore what's not relevant and distracting.

Code

<div class="table-responsive">
<table class="table table-striped table-bordered">

<tbody>
<tr>
<td style="width: 33%"><img class='img-fluid rounded border border-dark' src='https://brainstore-rec.s3.amazonaws.com/xs/rec_brain_get_shit_done02.jpg', alt='Image Missing'></td>
<td style="width: 66%"><b>Get. It. Done</b><br>
We focus on getting things done. We focus on what is most relevant. We joyfully ignore what's not relevant and distracting. </td>

</tr>
</tbody>
</table>

</div>

Option 2: Adjust column width based on size of viewing devise

Manually adjusting columns using the col-parameter and d-flex (you can adjust e.g. for mobile). You can define customized values for col-xs (of mobile devises) or col-md (for larger ones). The total for all columns must be 12.

Firstname Lastname Lastname
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Code

<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr class="bg-warning text-white d-flex">
<td class='col-xs-4 col-md-3'><b>Firstname</b></td>
<td class='col-xs-4 col-md-3'><b>Lastname</b></td>
<td class='col-xs-4 col-md-6'><b>Lastname</b></td>
</tr>
</thead>
<tbody>
<tr class='d-flex'>
<td class='col-xs-4 col-md-3'>John</td>
<td class='col-xs-4 col-md-3'>Doe</td>
<td class='col-xs-4 col-md-6'>john@example.com</td>
</tr>
<tr class='d-flex'>
<td class='col-xs-4 col-md-3'>Mary</td>
<td class='col-xs-4 col-md-3'>Moe</td>
<td class='col-xs-4 col-md-6'>mary@example.com</td>
</tr>
<tr class='d-flex'>
<td class='col-xs-4 col-md-3'>July</td>
<td class='col-xs-4 col-md-3'>Dooley</td>
<td class='col-xs-4 col-md-6'>july@example.com</td>
</tr>
</tbody>
</table>
</div>