Booststrap table insert break after modulus - html

What should I change in my code in order to have only 3 columns?
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>31</td>
<td>32</td>
<td>33</td>
</thead>
</table>
edit: here is the real code (data from Django). I dont know in advance the number of rows.
{% for pi, coll in items %}
<strong>{{pi}}</strong>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
{% for element in coll %}
<td>{{element.Collocation.StartDate}} at {{element.Collocation.StartTime}}</td>
<td>{{element.Type}}</td>
<td> {{element.Title}}</td>
{% endfor %}
</thead>
</table>
This is what I have


You need to have tag for each row.
The tag defines a row in an HTML table.
Reference : https://www.w3schools.com/html/html_tables.asp
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
Dynamic Rows for the Table
<?php foreach($rows as $row): ?>
<tr>
<td><?=$row['Price'];?></td>
<td><?=$row['Year'];?></td>
<td><?=$row['Value'];?></td>
</tr>
<?php endforeach;?>


Please Add this kind of structure.
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>


<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</tbody>
</table>
I think this should work check it out.

Related

Nested ( master detail ) table in html

I added child table in tr but I am unable to make a grid like shown in mockup.
Basically, I got the idea from dev extreme grid. https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/

You should be able to use further <tr>, <td>, <th> elements to do what you need, since it seems like you want to keep the same table layout for the pseudo-child-tables:
<table>
<thead>
<tr>
<th>Teader Id</th>
<th>Name</th>
<th>address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>DEF</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>GHI</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>12</td>
<td>JKL</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>MNO</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>PQR</td>
<td>Male</td>
</tr>
</tbody>
</table>

Semantic way to add a "caption" inside a table

I have a table that has a caption. To group related information together, I used colspan on the <th> rows (Total divisions and Elevation) so that they serve as "captions" for the cells below them. However, I am not sure if this is the appropriate way of doing it semantically. Particularly, how will I make sure that Total divisions and Elevation would only refer to the rows below them?
<table>
<caption>Summary</caption>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
<tr>
<th scope="row" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
<tr>
<th scope="row" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</table>

Group your rows into <tbody> elements and scope each summary <th> to its parent <tbody> with scope="rowgroup" in lieu of scope="row", like so:
<table>
<caption>Summary</caption>
<thead>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</tbody>
</table>
(The first group can be either a <thead> or another <tbody> depending on your preference, but what's important are the two groups you're trying to scope the <th> elements to.)

Merge columns into single cell

I create a table and what I want is to merge some cells in the last row to show the total or summary. I tried to put some CSS but it didn't work.
this the table I have.
<table class="table table-bordered">
<thead>
<tr>
<th>Class</th>
<th>A</th>
<th>B</th>
<th>Total</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>25</td>
<td>27</td>
<td>52</td>
</tr>
<tr>
<td>2</td>
<td>24</td>
<td>26</td>
<td>50</td>
</tr>
<tr>
<!-- merge -->
<td></td>
<td></td>
<td>Total</td>
<!-- merge -->
<td>102</td>
</tr>
</table>
what I want is to merge the first 3 in the last row
how can I do that?
thanks!

You could use colspan to specify which cells that you would like combined.
<table class="table table-bordered">
<thead>
<tr>
<th>Class</th>
<th>A</th>
<th>B</th>
<th>Total</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>25</td>
<td>27</td>
<td>52</td>
</tr>
<tr>
<td>2</td>
<td>24</td>
<td>26</td>
<td>50</td>
</tr>
<tr>
<td colspan="3">Total</td>
<td>102</td>
</tr>
</table>

I think it would be:
<td colspan="3"> This is Bigger! </td>
That is merging horizontally.
If you want to merge vertically, you would have to say
<th rowspan="2"> This is also bigger, but different! </th>

It is possible to make a vertical table with horizontal headers?

I'm trying to create a vertical table, with headers on specific areas such as a user's address. I want to create something like this:
General Information
Name John Smith
Date of Birth April 1, 1984
Gender Male
Account Information
Correspondence Address
Address 1 1234 MLK Blvd
Address 2 502
City Kansas City
State Missouri
Country USA
Zip Code 55748
Residential Address
Address 1 143 St Michael's Way
Address 2
City Independence
State Missouri
Country USA
Zip Code 55760
I am currently using this code for the table without headers:
<table>
<tr id='Name'>
<th>Name</th>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>
</table>
How do I add headers at the top of the table?

give colspan as a desired value to occupy the position as headers
<table>
<tr>
<td colspan='2'>General Information</td>
</tr>
<tr >
<td >Name </td>
<td > John Smith </td>
</tr>
<tr>
<td >Date of Birth</td>
<td > April 1, 1984</td>
</tr>
</table>

demo here, code here:
<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<th colspan="2">Header2</th>
</tr>
</table>

<table>
<tr><td colspan="2">Title 1</td></tr>
<tr id='Name'>
<th>Name</th>
</tr>
<tr><td colspan="2">Title 2</td></tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
...
</table>

<table>
<tr>
<td></td>
<td colspan="2">General Information</td>
</tr>
<tr id='Name'>
<th>Name</th>
<td></td>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
<td></td>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>

It's just a case of rearranging the <td>'s and <th>'s
Table headers (or "captions") are simply an extra tag.
Option 1: (traditional)
<table>
<caption>General Information</caption>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
</table>
<table>
<caption>Account Information</caption>
</table>
<table>
<caption>Correspondence Address</caption>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
</table>
<table>
<caption>Residential Address</caption>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>
Option 2: (Using additional tr as a sub-header)
<table>
<tr>
<th colspan="2" class="caption">General information</th>
</tr>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th colspan="2" class="caption">Account Information</th>
</tr>
<tr>
<!-- Account Info -->
</tr>
<tr>
<th colspan="2" class="caption">Correspondence Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
<tr>
<th colspan="2" class="caption">Residential Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>

Table with two rows, one row only for title - HTML

I am trying to make a table with two rows and multiple columns in html. I want the first row to have only one space instead of two for each column. It will be a title space for the entire table.
Example: (Specifications is the Title)
[Specifications]
[Power ][200 Lumens ]
[Lamp ][4 Ultrabright LEDs, Maxbright LED]
[Burn Time ][150 Hours ]

Use colspan="2"
<table border="1">
<tr>
<th colspan="2">Specifictaions</th>
</tr>
<tr>
<td>Power</td>
<td>200 Lumens</td>
</tr>
<tr>
<td>Lamp</td>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<td>Burn Time</td>
<td>150 Hours</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/tCvBn/
Screenshot

If there is just one section to the table (viz: all the table contents are specifications) I'd probably use a caption element to mark that up:
<table>
<caption>Specifications</caption>
<tr>
<th scope="row">Power</th>
<td>200 Lumens</td>
</tr>
<tr>
<th scope="row">Lamp</th>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<th scope="row">Burn Time</th>
<td>150 Hours</td>
</tr>
</table>
If there are multiple sections, I'd use the spanning (<th scope="col" colspan="2">... table headers:
<table>
<tr>
<th scope="col" colspan="2">Specifications</th>
</tr>
<tr>
<th scope="row">Power</th>
<td>200 Lumens</td>
</tr>
<tr>
<th scope="row">Lamp</th>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<th scope="row">Burn Time</th>
<td>150 Hours</td>
</tr>
<tr>
<th scope="col" colspan="2">Some Other Section</th>
</tr>
<tr>
<th scope="row">Foo</th>
<td>Bar</td>
</tr>
<tr>
<th scope="row">Baz</th>
<td>Qux</td>
</tr>
</table>
fiddle

I believe this is what you're looking for! Here is a demo
<table width="100" border="1">
<tr>
<th colspan="2">Foo</th>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</table>