This is my life’s first table, but the CSS that i have written is not applying →
I even tried:
display: table;
1 Like
It’s because the table elements aren’t right. You can’t put data right into a tr. You have to have a th or td element inside the tr.
Semantically, the th would go inside the tr in the thead section and the td would go into the tr in the tbody section.
3 Likes
This is not valid table structure, the rows must contain sub-objects, either table-data <td> cells or table heading <th> cells as appropriate.
No need, as it’s a table anyway, or it would be if properly structured. 
2 Likes
Got It.
1 Like
Is such things possible:
<tr>
<td>
<tr>
</tr>
</td>
</tr>
I mean tr under a td?
Hi there, Your padding also doesnt work sir. It should be on th element.
Hi there codeispoetry,
oooops, sorry about that. 
It should have read…
th {
background-color: #000;
color: #fff;
padding: 1.25em;
}
Check the link again.
coothead
1 Like
I have glanced most of the things here.
I wanted to design a table something like this image:
This is my understanding:
#1 → First is thead: Quick Survey
#2 → Then in body there is a row, which will be divided into two columns. Each columns will be divided into two rows and then these rows, for example the first column second row, will have 8 columns with vertical text.
#3 → Then again there will be a row in the body for basic SUPPORT.
#4 → Then one row will be divided into multiple columns with green and grey color as shown.
I have designed this in excel.
Please correct me if my perception is wrong.
A new table in a table-cell is perfectly legal:
<tr>
<td>
<table>
</table>
</td>
</tr>
Table examples at Mozilla Dev:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#More_Examples
Anything is possible.
The answer to that question is best found/understood if you read up on 17.2.1 Anonymous table objects:
https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
1 Like
The purpose of a table is to show the relations of tabular data in columns and rows.
#1 seems more like a heading.
#2 seems like two sub headings with lists of something. Maybe two tables with captions.
#3 looks like a table head (left col th) for a row of data.
#4 data related to the above row/list of something.
Perhaps it’s my perception that’s wrong.
Maybe there could be a better structure using headers for both columns and rows?
1 Like
Honestly, I have no idea.
Hi there codeispoetry,
does this help…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#survey {
border-collapse: collapse;
background-color: #f2f2f2;
}
#survey caption {
padding: 0.25em;
border: 1px solid #000;
border-bottom: 0;
font-size: 1.5em;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
#survey th, #survey td {
padding: 0.25em;
border: 1px solid #000;
}
#survey th {
text-transform: uppercase;
}
#survey thead th {
background-color: #fff;
}
#survey td {
text-align:center;
}
#survey tfoot th {
text-align: left;
}
#survey tfoot td {
background-color: #c6efce;
}
#survey tfoot td:nth-of-type(8),
#survey tfoot td:nth-of-type(14) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table id="survey">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="8">Desktop</th>
<th scope="col" colspan="9">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="17">Basic Support</th>
</tr><tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>2.3</td>
<td>6</td>
<td>?</td>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
<td>3</td>
<td>7</td>
</tr>
</tfoot>
</table>
</body>
</html>
Note :-
This, of course, will not fit on a mobile device. !!!
coothead
3 Likes
Maybe the w3 Table Concepts Tutorial is of interest, it gives some examples of table headers:
2 Likes
A basic table requires NO css.
My search engine is DuckDuckGo. I searched the string “html table structure” and found many “html table” resources.
https://duckduckgo.com/?q=html+table+structure&t=ffsb&ia=web
Try it. You might like it… or not… your choice.
1 Like
Actually, I wanted to create a table like this → https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
Just for the sake of my learning. I have seen the table code in the browser, but wanted to learn and do it on my own.
For the responsive one they have created completely a different layout.
That is correct.
What point are you trying to make?
coothead
1 Like
Just examining the structure you have created. I was not skeptical about anything. You have made it far easy then what I have perceived initially.