HTML <th> col attribute - html

I was just wondering if that by default a HTML <table> element implicitly applies the attribute scope="col" to the first group of <th> elements contained within the <thead> element?
When I render the first set of HTML below in a browser it seems to automatically detect that the <th> cells for Jan, Feb, March, April etc are headers for a column. So is it the case the scope="col" does not need adding to the markup as it will be automatically rendered this way?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>
This second set of markup includes scope="col" added to the tags for Jan, feb, March April etc. Is it necessary? As the example above seems to render these <th> as columns anyway without scope"col".
I am aware that the scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers. So should it be added for the purpose of better semantic markup and accessibility?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Jan</th>
<th scope="col">Feb</th>
<th scope="col">March</th>
<th scope="col">April</th>
<th scope="col">May</th>
<th scope="col">June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>

According to the HTML5 spec, the scope attribute defaults to auto:
The scope attribute's missing value default is the auto state.
This value is characterized by
The auto state makes the header cell apply to a set of cells selected based on context.
So I assume, that screenreaders will be able to detect the context properly, which in turn means, that you do not have to explicitly define the attribute, unless you have some special instances or usecases for rowgroup and colgroup values.

You can just specify the meaning of the table more with the scope attrribute. In normal tables, i wouldn't even use it, but if your table has a meaning on your page, and people want to take it over, it would be handy to use it, especially on a reader. However, if you just add tables to do minor stuff in it, leave it out. Personally this is something you should only look into if the table becomes really expanded.
The definition is as followed:
Definition and Usage
The scope attribute specifies whether a header cell is a header for a
column, row, or group of columns or rows.
this comes from the W3 website, btw.

Related

How Browser Engine works?

Here are my HTML test codes using Google HTML/CSS guide.
<table>
<thead>
<tr>
<th>Date
<th>Country
<tbody>
<tr>
<td>24/07/2018
<td>Myanmar
<tr>
<td>31/06/2018
<td>France
</table>
The following is how browser interprets it.
<table>
<thead>
<tr>
<th>Date
</th>
<th>Country
</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/07/2018
</td>
<td>Myanmar
</td>
</tr>
<tr>
<td>31/06/2018
</td>
<td>France
</td>
</tr>
</tbody>
</table>
Here is my questions.
How the browser detect the lack of closing tag and how they interprets it.
It is preferable to use without closing elements? If it is, when should I use?
If it is not preferable, why?
Will it be impact on styling and adding interactivity on HTML semantic style?
Answers:
This is beyond the scope of SO, but just like any compiler detects something that opened is not closed. You can try and program something that identifies a valid bracket series, it would probably be similar.
Not using closing elements may break your page beyond being horribly un-maintainable. Always use closing elements.
See 2.
See 2.
Browsers sometimes can guess what you meant (better say, they parse luckily in a way that produces what you meant), but might also be wrong. See this:
<div>Hello<span>world
is this:
<div>Hello</div><span>world></span>
or
<div>Hello<span>world></span></div>
both are valid, and the browser has no idea which you meant. If you really want to get into how browsers are supposed to parse HTML, see this great link by
#modu and #kalido: http://w3c.github.io/html/syntax.html#tokenization . You may be able to workout how a browser should parse the above line.

can you do a automatic HTML calendar?

I have done a calendar, a bit of the calendar is below. But now Im wondering if there is a way for the calendar to automatically update. Or do I need to write the code below for every month and every year or is there a method in eg PHP that helps you with that? I do not want to use bootstrap or a plugin.
<table>
<lable>Januari 2018 </lable>
<thead>
<tr>
<th scope="col">Su</th>
<th scope="col">Mo</th>
<th scope="col">Tu</th>
<th scope="col">We</th>
<th scope="col">Th</th>
<th scope="col">Fr</th>
<th scope="col">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td><td>1<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> /*and so on for the reset of the month*/
Of course you can build a dynamic calendar component.
Don't start a static approach like you have posted in your question.You have to learn the calendar/date api of your favourite language you want to use. It should be feasible in almost any language.
But it will be some effort and you have to get really into it. Maybe you rethink about using an already existing and tested component.

How to find Xpath for nodes with text including linebreak or html fomatters

I am trying to locate a specific node content from an html response. I am trying to find a bit difficult to locate a very specific node as the node element contains line breaks. I am trying out in xpathtester site and my test xml is a provided below.
<html>
<table >
<tr >
<th colspan="3">
<table >
<tr valign="bottom">
<th scope="col" align="left">Test
<br/> Item1</th>
<th scope="col">:</th>
<th scope="col" align="left">ABC123</th>
<th rowspan="7">
<img width="100" height="140" src="xyzcontenturl.jpg"/>
</th>
</tr>
<tr valign="bottom">
<th scope="col" align="left">Test
<br/> Item2</th>
<th scope="col" >:</th>
<th scope="col" align="left" colspan="2" >DEF789</th>
</tr>
</table>
</th>
</tr>
</table>
<p>
<strong/>
</p>
</html>
The idea is to pick up the third column header text and i can place a condition //th[contains(text(),"Test")]/following-sibling::th[2]/text() to locate that(value returned is ABC123).
The challenge is when i try to locate the value based on a specific node ie. "Test Item1" .
Since the Line break is sitting between The text "Test" and "Item1" I could not use functions "contains or starts-with.
How do I write the XPATH so that i can pick up the TH element with value `"Test <br/> Item1"?
Note: The xml provided is a sample illustrating the problem hence first table header ( th element) or second Table Header (th) element etc won't help.
Compare against normalize-space() which replace newlines (not HTML <br/> to be clear) with single space :
//th[normalize-space()='Test Item1']/following-sibling::th[2]/text()
demo
The function receives concatenation of all text nodes within th as argument, do whitespaces normalization on the argument and return the result. Quoted from the linked specification :
The normalize-space function returns the argument string with whitespace normalized by stripping leading and trailing whitespace and replacing sequences of whitespace characters by a single space.
If you're using XPath in code, then get the element and use the "InnerText" property.
If from XSL use the text() function.
What are you calling your XPath from?

How can I make a HTML table with headers in one vertical column?

I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers

HTML table headers alignment

I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>