My First Table

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. :wink:

2 Likes

Got It.

Hi there codeispoetry,

https://codepen.io/anon/pen/maKPdo

coothead

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. :wonky:

It should have read…

th {
  background-color: #000; 
  color: #fff; 
  padding: 1.25em;
 }

Check the link again. :winky:

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. :wink:

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.

I think for the body part you have created 8 rows, and then divided them into columns:

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.

I just tried to recreate a small portion of @coothead but the table structure is not coming. I go with the words of @ronpat that table even doesn’t require a CSS initially.

Structure seems to be correct where am I go wrong?