/    Sign up×
Community /Pin to ProfileBookmark

What Is The Difference Between These Table Borders ?

Hi,

I do not see the difference in my browser between these two:

1.

[code]
<!–Table Border Collapse–>
table {
width: 100%;
border-collapse: collapse;
}
[/code]

2.

[code]
<!–Design Cell-less Table–>
table {
border: 1px solid;
[/code]

The above two codes show table appearance the same it would show if I was using:

[code]
table, th, td {
border: 1px solid;
}
[/code]

See for yourselves by testing above two one by one with following table code….

[code]
<table name=”characters”>
<caption>Caption</caption>
<colgroup>
<col span=”3″ style=”background-color:white;”>
<col span=”3″ style=”background-color:blue;”>
<col span=”3″ style=”background-color:yellow;”>
</colgroup>
<thead>
<tr>
<th colspan=”3″>GOOD</th><th colspan=”3″>BAD</th><th colspan=”3″>NEUTRAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td>
</tr>
<tr>
<td id=”gt0″>Mr</td><td id=”gf0″>Muhammad</td><td id=”gs0″>Ali</td><td id=”bt0″>Mr</td><td id=”bf0″>Adolph</td><td id=”bs0″>Hitler</td><td id=”nt0″>Mr</td><td id=”nf0″>Mohandas</td><td id=”ns0″>Ghandi</td>
</tr>
<tr>
<td id=”gt1″>Mr</td><td id=”gf1″>Mike</td><td id=”gs1″>Tyson</td><td id=”bt1″>Mr</td><td id=”bf1″>Winston</td><td id=”bs1″>Churchill</td><td id=”nt1″>Mr</td><td id=”nf1″>Crocodile</td><td id=”ns1″>Dundee</td>
</tr>
<tr>
<td id=”gt2″>Mr</td><td id=”gf2″>Malcolm</td><td id=”gs2″>X</td><td id=”bt2″>Mr</td><td id=”bf2″>Joseph</td><td id=”bs2″>Stalin</td><td id=”nt2″>Mr</td><td id=”nf2″>Napolean</td><td id=”ns2″>Bonaparte</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”3″>GOOD</td><td colspan=”3″>BAD</td><td colspan=”3″>NEUTRAL</td>
</tr>
</tfoot>
</table>
[/code]

This shows differences:
https://www.w3schools.com/css/css_table.asp

to post a comment
CSS

10 Comments(s)

Copy linkTweet thisAlerts:
@novice2022authorJun 25.2022 — Hi,

This is Table header ...

<i>
</i> &lt;thead&gt;
&lt;tr&gt;
&lt;th colspan="3"&gt;GOOD&lt;/th&gt;&lt;th colspan="3"&gt;BAD&lt;/th&gt;&lt;th colspan="3"&gt;NEUTRAL&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;

It shows 3 rows on my browser.

This is footer:
<i>
</i> &lt;tfoot&gt;
&lt;tr&gt;
&lt;th colspan="3"&gt;GOOD&lt;/th&gt;&lt;th colspan="3"&gt;BAD&lt;/th&gt;&lt;th colspan="3"&gt;NEUTRAL&lt;/th&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;


Footer only 1 row big. Not matching header row size. To match what to write ?

I tried this but no luck ...
<i>
</i> &lt;tfoot&gt;
&lt;tr&gt;
&lt;td colspan="3" rowspan="3"&gt;GOOD&lt;/td&gt;&lt;td colspan="3" rowspan="3"&gt;BAD&lt;/td&gt;&lt;td colspan="3" rowspan="3"&gt;NEUTRAL&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;

How to make them same size ? Header & Footer ? Columnwise I managed it. Row-wise not.
Copy linkTweet thisAlerts:
@novice2022authorJun 30.2022 — So, no solution then ?
Copy linkTweet thisAlerts:
@SempervivumJun 30.2022 — @novice2022#1644900

Do you intend to make the footer the same height as the header? When no height is defined explicitly the height adjusts to the content in the table cells. And as the content is the same I would expect that the height will be the same either.

If it's not for you, please post the complete HTML of your table and the CSS if there is any.
Copy linkTweet thisAlerts:
@NogDogJun 30.2022 — Consider using jsfiddle.net to test these things and to show us what you actually tried, e.g. (click on the "HTML", "CSS", and "Result" tab to see what I tried, where I see no difference in header and footer rows):

https://jsfiddle.net/4pzvuysc/
Copy linkTweet thisAlerts:
@novice2022authorJul 02.2022 — @Sempervivum#1645105

Footer should be exactly same as header. So height, width, text align, text size, text style, etc all twins.

<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;Untitled document&lt;/title&gt;

&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;

&lt;style media="screen"&gt;

th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}

#gt0:hover, #gt1:hover, #gt2:hover {background-color: orange; color: red;}

table {
width: 100%;
border-collapse: collapse;
}

th {
height: 70px;
}


td {
text-align: center;
}

&lt;!--
Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in &lt;th&gt; or &lt;td&gt;.
By default, the vertical alignment of the content in a table is middle (for both &lt;th&gt; and &lt;td&gt; elements).
The following example sets the vertical text alignment to bottom for &lt;td&gt; elements.
--&gt;


&lt;!--Design Hoverable Table --&gt;
&lt;!--Use the :hover selector on &lt;tr&gt; to highlight table rows on mouse over:--&gt;
tr:hover {background-color: coral;}


&lt;!--Design th --&gt;
th {
background-color: #04AA6D;
color: white;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div style="overflow-y: auto;"&gt;
&lt;table name="characters"&gt;
&lt;caption&gt;Caption&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col span="3" style="background-color:white;"&gt;
&lt;col span="3" style="background-color:blue;"&gt;
&lt;col span="3" style="background-color:yellow;"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th colspan="3"&gt;GOOD&lt;/th&gt;&lt;th colspan="3"&gt;BAD&lt;/th&gt;&lt;th colspan="3"&gt;NEUTRAL&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt0"&gt;Mr&lt;/td&gt;&lt;td id="gf0"&gt;Muhammad&lt;/td&gt;&lt;td id="gs0"&gt;Ali&lt;/td&gt;&lt;td id="bt0"&gt;Mr&lt;/td&gt;&lt;td id="bf0"&gt;Adolph&lt;/td&gt;&lt;td id="bs0"&gt;Hitler&lt;/td&gt;&lt;td id="nt0"&gt;Mr&lt;/td&gt;&lt;td id="nf0"&gt;Mohandas&lt;/td&gt;&lt;td id="ns0"&gt;Ghandi&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt1"&gt;Mr&lt;/td&gt;&lt;td id="gf1"&gt;Mike&lt;/td&gt;&lt;td id="gs1"&gt;Tyson&lt;/td&gt;&lt;td id="bt1"&gt;Mr&lt;/td&gt;&lt;td id="bf1"&gt;Winston&lt;/td&gt;&lt;td id="bs1"&gt;Churchill&lt;/td&gt;&lt;td id="nt1"&gt;Mr&lt;/td&gt;&lt;td id="nf1"&gt;Crocodile&lt;/td&gt;&lt;td id="ns1"&gt;Dundee&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt2"&gt;Mr&lt;/td&gt;&lt;td id="gf2"&gt;Malcolm&lt;/td&gt;&lt;td id="gs2"&gt;X&lt;/td&gt;&lt;td id="bt2"&gt;Mr&lt;/td&gt;&lt;td id="bf2"&gt;Joseph&lt;/td&gt;&lt;td id="bs2"&gt;Stalin&lt;/td&gt;&lt;td id="nt2"&gt;Mr&lt;/td&gt;&lt;td id="nf2"&gt;Napolean&lt;/td&gt;&lt;td id="ns2"&gt;Bonaparte&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td colspan="3" rowspan="3"&gt;GOOD&lt;/td&gt;&lt;td colspan="3" rowspan="3"&gt;BAD&lt;/td&gt;&lt;td colspan="3" rowspan="3"&gt;NEUTRAL&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@NogDogJul 02.2022 — > @novice2022#1645149 Footer should be exactly same as header.

Maybe you should use the same type of table cell element in both, then? 🤷
Copy linkTweet thisAlerts:
@SempervivumJul 04.2022 — @novice2022#1645149

You applied `height: 70px;</C> to <C>th</C> only, however in the footer it's <C>td</C>. You can fix this by including the cells in the footer in your selector:
<CODE>
`<i>
</i>th, tfoot td {
height: 70px;
}<i>
</i>
`</CODE>

BTW: Your comments in the CSS are wrong, you better use <C>
/* this is a comment */`
.
Copy linkTweet thisAlerts:
@mepestimationJul 04.2022 — You have raised beneficial content. The way you explained the content is very impressive. I am also providing MEP Estimating Services throughout the country. [url=https://mepestimation.com/mechanical-estimating-services/]Mechanical Estimating Services[/url], [url=https://mepestimation.com/insulation-estimating-services/]Insulation Estimating Services[/url], [url=https://mepestimation.com/duct-takeoff-services/]Duct Takeoff Services[/url]
Copy linkTweet thisAlerts:
@aminkha047Jul 05.2022 — [url=https://www.yellowpages.ae/subcategory/landscaping-&-gardening/landscape-contractors/5ec8f6e2ebee8a7379accd28]Landscape Design & Maintenance Companies & Contractors in UAE[/url]. Get complete details of landscape companies dealing in Landscape Design & Maintenance Services
Copy linkTweet thisAlerts:
@novice2022authorJul 11.2022 — @NogDog#1645150

A code snippet sample would speak volumes what you mean. I am still raw at tables.

I understood sempervivum above but curious to learn what you had in mind. I think you got a shortcut version up your sleeve.

Thanks
×

Success!

Help @novice2022 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...