I've been designing webpages for some time now, and for one of my webpages, I need to design a table with 6 columns and 3 rows. The first column need to have 3 rows, while the other 5 columns only need 2 rows. I can make it using this CODE:
<tr><td class="style3">7:00 AM
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
</tr>
<tr><td class="style3">7:30 AM
</td>
</tr>
<tr><td class="style3">7:59 AM
</td>
<td class="style3">
</td>
<td class="style3">
</td>
<td class="style3">
</td>
<td class="style3">
</td>
</tr>
How can I make it so that the bottom border of the first row of the 5 columns are exactly in the middle of the second row of the first column?
It means that the line of the bottom border of the first row of the 5 columns is in the middle of the value "7:30 AM" from the first column, second row. I know it is quite confusing but I cannot show you an image of how I want it to look like because I just join here and I don't have 10 reputations to post an image. Please understand my logic.
rowspan=2 means, the column will span two rows, hence if you are applying this to the first column of the first row, the the next row should have one less column. For every column you do a rowspan="n" on, you need to omit that column from the next "n-1" number of rows.
The following snippet will make it clear to you:
table, td {
border: 1px solid gray;
border-collapse: collapse;
}
td { padding: 8px; }
<table>
<tbody>
<tr>
<td class="style3">7:00 AM</td>
<td class="style3" rowspan="2">Event 1</td>
<td class="style3" rowspan="2">Event 2</td>
<td class="style3" rowspan="2">Event 3</td>
<td class="style3" rowspan="2">Event 4</td>
</tr>
<tr>
<td class="style3" rowspan="2"></td>
</tr>
<tr>
<td class="style3" rowspan="2">Event 5</td>
<td class="style3" rowspan="2">Event 6</td>
<td class="style3" rowspan="2">Event 7</td>
<td class="style3" rowspan="2">Event 8</td>
</tr>
<tr>
<td class="style3">7:59 AM</td>
</tr>
</tbody>
</table>
Related
When I use **collspan=2 **on the cell 28 the table doesn't have a good view and my expectation is merge cell 28 and 29 without breaking.
<table width="100%" border="2">
<tr>
<td colspan="2" rowspan="2">1</td>
<td colspan="2">3</td>
<td colspan="2">5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">9</td>
<td colspan="2" rowspan="2">11</td>
</tr>
<tr>
<td>13</td>
<td rowspan="3">14</td>
</tr>
<tr>
<td rowspan="3">19</td>
<td rowspan="3">21</td>
<td colspan="2">22</td>
<td>24</td>
</tr>
<tr>
<td rowspan="2">28</td>
<td rowspan="2">29</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td>32</td>
</tr>
</table>
Simple typo. you tried collspan, but it's colspan.
the full table row should look like this:
<tr>
<td rowspan="2" colspan="2">28 + 29</td>
<td rowspan="2">30</td>
</tr>
A word of advice from a very old coder:
learning this level of table trickery was important in 1999,
bevor CSS and flexbox and grid came along.
Now it's irrelevant.
Please check the image #epascarello #bjelli
this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
Table with 3 rows. the first row span 1.5 column each
I am 2 months into learning html and i came across a task where i have no idea of where to start from. I want to implement a html table with 3 rows, the first row however should have two equal parts of columns and the other two to have 3 equal parts. Please help.
Here is a rough code for it:
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
<td> five</td>
</tr>
<tr>
<td>six</td>
<td>seven</td>
<td> eight</td>
</tr>
</table>
You can use colspan. The colspan attribute defines the number of columns a table cell should span.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td colspan='3'>one </td>
<td colspan='3'> two </td>
</tr>
<tr>
<td colspan='2'>three</td>
<td colspan='2'>four</td>
<td colspan='2'> five</td>
</tr>
<tr>
<td colspan='2'>six</td>
<td colspan='2'>seven</td>
<td colspan='2'> eight</td>
</tr>
</table>
How I close this gap between the inner table and the main table cell?
https://jsfiddle.net/w7eekbcL/2/
<td>
<table style="width:100%">
<tr>
<td colspan="2" style="font-family:verdana; color:#424242">main list</td>
</tr>
<tr>
<td colspan="2">list</td>
</tr>
<tr>
<td colspan="2">• one</td>
</tr>
<tr>
<td colspan="2">• second</td>
</tr>
<tr>
<td colspan="2">• thurd</td>
</tr>
</table>
</td>
For example I tried to use text-aligment but the result is the same.
Add vertical-align: top to the td that contains the table.
My question is that how can I make a row with different columns quantity ?
For example I want to have 2 columns in last row in this picture (the portion of each cell must be 50%).
Another question that I have is that how can I make text starts from first line in a cell (center cell , in this picture) ?
My code is :
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th,
td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left">
<td colspan="3">
home products contact us
</td>
</tr>
<tr>
<td width="25%">last post</td>
<td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
<td>our friends</td>
</tr>
<tr>
<td>our statics</td>
<td>24</td>
</tr>
<tr>
<td>our social pages</td>
<td>about us</td>
</tr>
</table>
There's two primary answer categories to your question.
First, the direct answer. Think of your page as a grid. You want enough squares on the grid to be divisible by both 3 and 2. Say, 6. Then use colspan to set each column to the number of grid columns that would be needed -- so, colspan=2 for 3 columns, and colspan=3 for 2 columns.
<table border=1>
<tr>
<td colspan=6>My Website</td>
</tr>
<tr>
<td colspan=6>home, products, contact us</td>
</tr>
<tr>
<td colspan=2 style="width:33%">last post</td>
<td colspan=2 rowspan=2 style="width:33%">hello my name</td>
<td colspan=2 style="width:33%">our friends</td>
</tr>
<tr>
<td colspan=2 style="width:33%">our statics</td>
<td colspan=2 style="width:33%">24</td>
</tr>
<tr>
<td colspan=3 style="width:50%">our social pages</td>
<td colspan=3 style="width:50%">about us</td>
</tr>
</table>
The other answer category is that you should avoid using tables for your layout structure. There's a LOT of Google results for this one, and it's very opinion based, so I'll just say that generally tables should be used for data, css for layouts, and using tables for layouts may be quicker but it's less flexible.
Try this, its working well, hope it will resolve your issue.
Add this class
.column{display:inline-block; width:49%;}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" >
home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>
</td>
</tr>
</table>