Bookmark may have an incredibly large variety of modules and sections that can assist you with creating your dream website. Sometimes though, you will need to take matters into your own hands and do some coding.

For that we have our code embed module, below I will outline one way to create a table using HTML; below that will be a way to create a grid and style it using HTML/CSS. These lessons will be transferable to any assortment of projects and goals.

 

 

HTML Table

Some situations arise where you need to create a table that is much more flexible than any of the tables we offer. Enter the Bootstrap table:

First step would be to grab the code embed module and drop it where you would like to have the table set. Then enter this code in the module:

<div class="table-responsive">

<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">

<thead class="table-inverse">

<tr>

<th>Title 1</th>

<th>Title 2</th>

<th>Title 3</th>

<th>Title 4</th>

<th>Title 5</th>

</tr>

</thead>

<tbody>

<tr>

<td>text</td>

<td>text</td>

<td>text</td>

<td>text</td>

<td>text</td>

</tr>

</tbody>

</table>

</div>

 

This will create a table with 5 rows and 2 columns. You can then customize this into anything that you wish following the similar layout.

 

HTML / CSS Grid

Being able to create a table is great, but sometimes you want it to look a lot better than the standard code makes it look; for this we have CSS.

Just as you do with every code module, you will need to drop it where you want to have the grid display. Then within the module, you will enter this code:

<head>

<style>

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }


.grid-container {

display: grid;

grid-template-areas:

'header header header header header header'

'menu main main main right right'

'menu footer footer footer footer footer';

grid-gap: 10px;

background-color: orange;

padding: 10px;

}


.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);

padding: 20px 0;

font-size: 30px;

}

</style>

</head>


<body>


<h1>Grid Layout</h1>


<p>This grid layout contains six columns and three rows:</p>


<div class="grid-container">

<div class="item1">Header</div>

<div class="item2">Menu</div>

<div class="item3">Main</div>

<div class="item4">Right</div>

<div class="item5">Footer</div>

</div>


</body>



I would not be surprised if this looks incredibly confusing; to break it down into simple steps - everything contained with the <style> tag is the CSS, and everything else is the HTML. From all of our testing, you need to separate the two for everything to work correctly.

To experience both of these on a live site, please follow this link: https://htmlcsscodeembed.bookmark.com/

 

 

Did this answer your question?