I have some HTML code and would like to remove the outer borders of a <table>
<table class="table1">
<tr>
<tr>
<tr>
<th colspan="4" class="tableheader"><center>Tarieventabel 2019</center></th>
</tr>
<tr>
<td class="description"></td>
<td class="description"><b><center>Van</center></b></td>
<td class="description"><b><center>Tot</center></b></td>
<td class="description"><b><center>Prijs</center></b></td>
You can solve with using css.
<table class="borderNone" style="border:none;">
<tr>
<tr>
<tr>
<th colspan="4" class="tableheader">
<center>Tarieventabel 2019</center>
</th>
</tr>
<tr>
<td class="description"></td>
<td class="description"><b><center>Van</center></b></td>
<td class="description"><b><center>Tot</center></b></td>
<td class="description"><b><center>Prijs</center></b></td>
</tr>
</table>
Or using css classes
.borderNone{ border: none;}
Related
I am using bootstrap4 and I want to make a table where first row have 3 columns, another two rows with 4 columns. i.e. to look like this
My current table
<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-bordered">
<tbody>
<tr>
<td width="25%">1П</td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">2П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">Прод.</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</tbody>
</table>
Your code renders an incomplete table, so some browsers might try to make it complete producing an unexpected result. But you can simply add another cell in the first row, leave it empty and make its border invisible:
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
}
tr:first-of-type>td:last-child {
border: none;
}
<table class="table table-bordered table-bordered">
<tbody>
<tr>
<td width="25%">1П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">2П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">Прод.</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</tbody>
</table>
Bootstrap comes with built-in class.
remove the border class table-bordered on table, then add borderclass to tds
<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table m-5 w-50"><!-- demo purpose , use of w-50 and m-5 classes is optional-->
<tbody>
<tr>
<td width="25%" class="border">1П</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
<tr>
<td width="25%" class="border">2П</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
<tr>
<td width="25%" class="border">Прод.</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
</tbody>
</table>
I have a problem to achieve a table header which in some parts contains a second row of header elements, where three th cells belong to one main header cell above them. I don't know if is it possible to create an html table like this. To what I mean, I am providing my sample code and an illustration.
Goal:
Please take a look the hyphen line, that table i want to achieve to my table on my html. so right now i have the output of this. please see the second illustration.
Here is my html code:
<table class="table table-bordered">
<thead>
<tr style="font-size:13px; text-align: center;">
<th>1600</th>
<th colspan="2">P1W1</th>
<th colspan="2">TGT</th>
<th colspan="2">LY</th>
<th colspan="3" scope="colgroup">Variance Vs Target</th>
<th colspan="3" scope="colgroup">Variance Vs 2018</th>
</tr>
</thead>
<tbody>
<tr style="font-size:12px;">
<td style="">ADS</td>
<td style="text-align: right;">23,635</td>
<td></td>
<td style="text-align: right;">21,676</td>
<td></td>
<td style="text-align: right;">20,790</td>
<td></td>
<td style="text-align: right;">1,959</td>
<td style="text-align: right;">9.0%</td>
<td></td>
<td style="text-align: right;">2,845</td>
<td style="text-align: right;">13.7%</td>
<td></td>
</tr>
</tbody>
</table>
Thank you..
You can use rowspan="2" on all tr elements which *don't * have a second-level header and create a second row of tr elements that only contains the second-level th elements:
.table {
width: 100%;
border-collapse: collapse;
}
.header_2nd_level>th {
font-size: 10px;
color: grey;
}
th, td {
border: 1px dotted #ccc;
}
<table class="table table-bordered">
<thead>
<tr style="font-size:13px; text-align: center;">
<th rowspan="2">1600</th>
<th colspan="2" rowspan="2">P1W1</th>
<th colspan="2" rowspan="2">TGT</th>
<th colspan="2" rowspan="2">LY</th>
<th colspan="3" scope="colgroup">Variance Vs Target</th>
<th colspan="3" scope="colgroup">Variance Vs 2018</th>
</tr>
<tr class="header_2nd_level">
<th>amount</th>
<th>%</th>
<th>ppt</th>
<th>amount</th>
<th>%</th>
<th>ppt</th>
</tr>
</thead>
<tbody>
<tr style="font-size:12px;">
<td style="">ADS</td>
<td style="text-align: right;">23,635</td>
<td></td>
<td style="text-align: right;">21,676</td>
<td></td>
<td style="text-align: right;">20,790</td>
<td></td>
<td style="text-align: right;">1,959</td>
<td style="text-align: right;">9.0%</td>
<td></td>
<td style="text-align: right;">2,845</td>
<td style="text-align: right;">13.7%</td>
<td></td>
</tr>
</tbody>
</table>
This could work:
<table class="table table-bordered">
<thead>
<tr style="font-size:13px; text-align: center;">
<th rowspan="2">1600</th>
<th rowspan="2" >P1W1</th>
<th rowspan="2" >TGT</th rowspan="2">
<th rowspan="2" >LY</th rowspan="2">
<th colspan="3" scope="colgroup">Variance Vs Target</th>
<th colspan="3" scope="colgroup">Variance Vs 2018</th>
</tr>
<tr>
<th>Amount</th>
<th>%</th>
<th>ppt</th>
<th>Amount</th>
<th>%</th>
<th>ppt</th>
</tr>
</thead>
<tbody>
<tr style="font-size:12px;">
<td style="text-align: right;">ADS</td>
<td style="text-align: right;">23,635</td>
<td style="text-align: right;">21,676</td>
<td style="text-align: right;">20,790</td>
<td style="text-align: right;">1,959</td>
<td style="text-align: right;">9.0%</td>
<td></td>
<td style="text-align: right;">2,845</td>
<td style="text-align: right;">13.7%</td>
<td></td>
</tr>
</tbody>
</table>
Try making use of rowspan and columnspan property correctly.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered">
<thead>
<tr style="font-size:13px; text-align: center;">
<th colspan="1" rowspan="2">1600</th>
<th colspan="2" rowspan="2">P1W1</th>
<th colspan="2" rowspan="2">TGT</th>
<th colspan="2" rowspan="2">LY</th>
<th colspan="3" rowspan="1" scope="colgroup1">Variance Vs Target</th>
<th colspan="3" rowspan="1" scope="colgroup2">Variance Vs 2018</th>
</tr>
<tr style="font-size:13px; text-align: center;">
<td>Amount</td>
<td>%</td>
<td>ppt</td>
<td>Amount</td>
<td>%</td>
<td>ppt</td>
</tr>
</thead>
<tbody>
<tr style="font-size:12px;">
<td style="">ADS</td>
<td style="text-align: right;">23,635</td>
<td></td>
<td style="text-align: right;">21,676</td>
<td></td>
<td style="text-align: right;">20,790</td>
<td></td>
<td style="text-align: right;">1,959</td>
<td style="text-align: right;">9.0%</td>
<td></td>
<td style="text-align: right;">2,845</td>
<td style="text-align: right;">13.7%</td>
<td></td>
</tr>
</tbody>
</table>
What I would like to do:
What did I wrote:
<table>
<TR>
<TD ROWSPAN="4">left</TD>
<TD ROWSPAN="12">middle</TD>
<TD ROWSPAN="3">right</TD>
</TR>
<TR>
<TD ROWSPAN="4">left2</TD>
<TD ROWSPAN="3">right2</TD>
</TR>
<TR>
<TD ROWSPAN="4">left3</TD>
<TD ROWSPAN="3">right3</TD>
</TR>
<TR>
<TD ROWSPAN="3">right4</TD>
</TR>
</table>
It turns out with this:
I would like the table have same height, I can work in this way, but it is not the same height:
<table>
<TR>
<TD>left</TD>
<TD ROWSPAN="12">middle</TD>
<TD>right</TD>
</TR>
<TR>
<TD>left2</TD>
<TD>right2</TD>
</TR>
<TR>
<TD>left3</TD>
<TD>right3</TD>
</TR>
<TR>
<TD>right4</TD>
</TR>
</table>
and the result like this:
Got it! The trick was having a total of twelve <tr>s, even though some of them are empty.
As a point of curiosity, I solved this by making the table in excel, saving as html, and deleting all of the inline styles that excel puts in there.
td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=4>left</td>
<td rowspan=12>middle</td>
<td rowspan=3>right</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right2</td>
</tr>
<tr>
<td rowspan=4>left2</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right3</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=4>left3</td>
</tr>
<tr>
<td rowspan=3>right4</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
I have a table with the following layout for a time-sheet like application:
<table width="100%" border="1px">
<tr>
<th colspan="11" align="center">Function</th>
</tr>
<tr>
<td align="center">(01)</td> <!-- 7 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Products</th>
</tr>
<tr>
<td align="center">(02)</td> <!-- 10 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Other Codes</th>
</tr>
<tr>
<td align="center">V</td> <!-- 6 more TD's after this -->
</tr>
</table>
Each row has a different amount of table data elements. I'm trying to get the table data elements themselves centered in the entire row, not just the text inside the element itself but I cannot seem to find out how to do this.
Anything I've googled just gives me various things related to the align and valign attributes for the content of the cell itself, rather than centering the cells in the row.
I've tried messing around with the margin and border sizes but it doesn't seem to make any difference as recommended in some of these threads:
https://stackoverflow.com/a/8649701/1189566
How to align td elements in center
and a few other forums but haven't had any success.
If you must use table elements, you could do a table within the table data and get something like this:
http://jsfiddle.net/ykevsws0/
<table width="100%" border="1px">
<tr>
<th colspan="11" align="center">Function</th>
</tr>
<tr>
<td align="center">(01)</td>
<!-- 7 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Products</th>
</tr>
<tr>
<td align="center">(02)</td>
<!-- 10 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Other Codes</th>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
</table>
</td>
</tr>
</table>
Another way to do it if for some reason you cannot manipulate the markup is use css to force table data to display:block, like this (might want to specify a css class or something, applying this style to td across the board will cause problems):
http://jsfiddle.net/jagsyguv/
<table width="100%" border="1px">
<tr>
<th colspan="11" align="center">Function</th>
</tr>
<tr>
<td align="center">(01)</td>
<!-- 7 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Products</th>
</tr>
<tr>
<td align="center">(02)</td>
<!-- 10 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Other Codes</th>
</tr>
<tr>
<td>
V
</td>
<td>
V
</td >
<td>
V
</td>
<td>
V
</td>
</tr>
</table>
You need nested table for achieving this result
<table width="100%" border="1px">
<tr>
<th colspan="11" align="center">Function</th>
</tr>
<tr>
<td colspan="11" align="center">
<table border="1px">
<tr>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<td align="center">(01)</td>
<!-- 7 more TD's after this -->
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="11" align="center">Products</th>
</tr>
<tr>
<td colspan="11" align="center">
<table border="1px">
<tr>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<td align="center">(02)</td>
<!-- 10 more TD's after this -->
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="11" align="center">Other Codes</th>
</tr>
<tr>
<td colspan="11" align="center">
<table border="1px">
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>V</td>
</tr>
</table>
</td>
</tr>
</table>
Alternatively you could consider using css combined with div tags to generate the table / grid system
You should use a div. A div acts differently than a table, thus you can place it, with some style options, where you want in the page.
You can also build this table with just divs. I prefer using divs rather than tables, because they are easier to handle when you get used to them.
Try searching more info about divs and their usage.
This is a simple example:
<div style="margin:auto; width:60%; padding:10px;">
<table style width="100%" border="1px">
<tr>
<th colspan="11" align="center">Function</th>
</tr>
<tr>
<td align="center">(01)</td> <!-- 7 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Products</th>
</tr>
<tr>
<td align="center">(02)</td> <!-- 10 more TD's after this -->
</tr>
<tr>
<th colspan="11" align="center">Other Codes</th>
</tr>
<tr>
<td align="center">V</td> <!-- 6 more TD's after this -->
</tr>
</table>
</div>
The easiest way to center elements in a <td> cell is the following. (This works for <img>, <video> and most other elements):
<table width="100%" border="0" cellspacing="0" cellpadding="100%">
<tr>
<td>First Element</td>
<td>Second Element</td>
</tr>
</table>
How can I create a table like the above example in HTML and CSS.
I've tried the following:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?
You should use colspan for your second row. Like this :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan
<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>
colspan will help you. Link to more info.